基于JQuery 滑动与动画的说明介绍


Posted in Javascript onApril 18, 2013

jQuery 滑动方法:您可以在元素上创建滑动效果。
slideDown() 向下滑动元素。
slideUp() 向上滑动元素。
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slide(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery 动画 - jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的CSS 的 position 属性设置为 relative、fixed 或 absolute。
jQuery animate() - 能够操作多个属性
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

ex1,ex2

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

Javascript 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 #Javascript
基于JQuery 选择器使用说明介绍
Apr 18 #Javascript
关于jquery css的使用介绍
Apr 18 #Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 #Javascript
jQuery使用技巧简单汇总
Apr 18 #Javascript
document.documentElement的一些使用技巧
Apr 18 #Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
第七章 php自定义函数实现代码
2011/12/30 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php自动加载方式集合
2016/04/04 PHP
查找iframe里元素的方法可传参
2013/09/11 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Numpy数组的保存与读取方法
2018/04/04 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
深入浅析Python代码规范性检测
2020/07/31 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
质检部岗位职责
2013/11/11 职场文书
教职工代表大会主持词
2014/04/01 职场文书
毕业设计说明书
2014/05/07 职场文书
单位作风建设自查报告
2014/10/23 职场文书
优秀班主任申报材料
2014/12/16 职场文书
大学生求职意向书
2015/05/11 职场文书
原告离婚代理词
2015/05/23 职场文书
勤俭节约主题班会
2015/08/13 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫