基于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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
bootstrap table小案例
Oct 21 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 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
PHP入门学习笔记之一
2010/10/12 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP实现搜索相似图片
2015/09/22 PHP
sina的lightbox效果。
2007/01/09 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js中有关IE版本检测
2012/01/04 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
在django中自定义字段Field详解
2019/12/03 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
远东集团网络工程师面试题
2014/10/20 面试题
毕业生实习鉴定
2013/12/11 职场文书
领导检查欢迎词
2014/01/14 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
企业安全标语
2014/06/07 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书