jquery之stop()的用法
来源:互联网 发布:阿里云风池计划 编辑:程序博客网 时间:2024/05/22 07:06
转载:http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html
目的:为了 了解stop()的用法,举个例子,直观的方式看看。
实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物)
动画最终的完整效果: animater向右移动800px(这个完整的过程是动画1),然后,字体逐渐变大(这个完整的过程是动画2),然后,透明度逐渐降低到0(这个完整的过程是动画3),然后透明度逐渐恢复到1(这个完整的过程是动画4),然后字体大小变为16px同时移动到距离左边界200px的位置(这个完整的过程是动画5).
操作:点击不同id的button,观看效果。
HTML代码:
<div id="animater"> stop()方法测试 </div>
<div id="button"> <input type="button" id="button1" value="stop()"/> <input type="button" id="button2" value="stop(true)"/> <input type="button" id="button3" value="stop(false,true)"/> <input type="button" id="button4" value="stop(true,true)"/> </div>
CSS代码:
#animater{ width: 150px; background:activeborder; border: 1px solid black; /*为了移动,需设置此属性*/ position: relative; }
jquery代码:
// 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal'); // 点击不同的button执行不同的操作 $('#button1').click(function(){ //默认参数是false,不管写一个false还是两个false还是没写false效果一样 $('#animater').stop(); }); $('#button2').click(function(){ //第二个参数默认false $('#animater').stop(true); }); $('#button3').click(function(){ $('#animater').stop(false,true); }); $('#button4').click(function(){ $('#animater').stop(true,true); });
W3School上是这样的说明的:
stop(stopAll,goToEnd)
可选。规定是否允许完成当前的动画。
该参数只能在设置了 stopAll 参数时使用。
我的理解:
stopAll 为false时,不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时,停止所有加入队列的动画(如goToend为true,直接跳到当前动画的最终效果)。
goToend为false时,不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧),goToend为true时,允许直接跳到完成当前动画的最终末尾效果
每次运行页面,animater运动时,点击不同button,看到如下不同的效果(animater处在动画1时点击):
点击按钮button1(stop()),由于两个参数都是false。所以点击发生时,animater没有跳到当前动画(动画1)的最终效果,而直接进入动画2,然后动画3,4,5.直至完成整个动画。
点击按钮button1(stop(true)),由于第一个是true,第二个是false,所以animater立刻全部停止了,动画不动了。
点击按钮button1(stop(false,true)),由于第一个是false,第二个是true,所以点击发生时,animater身处的当前动画(动画1)停止并且animater直接跳到当前动画(动画1)的最终末尾效果位置,接着正常执行下面的动画(动画2,3,4,5),直至完成整个动画。
点击按钮button1(stop(true,true)),由于两个都是true,所以点击发生时,animater跳到当前动画(动画1)的最终末尾效果位置,然后,全部动画停止。
工作中遇到过的实际案例:
我在项目里做的一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏
true
,
true
),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)
- jquery之stop()的用法
- jquery之stop()的用法
- jquery之stop()的用法
- jquery之stop()的用法
- jquery之stop()的用法
- jquery之stop()的用法
- jquery 中 stop() 的用法
- jQuery动画stop()用法
- jQuery stop()用法
- jquery之stop()
- Jquery之stop()应用
- jquery 停止动画 stop的几种用法
- jquery 停止动画 stop的几种用法
- jquery的stop()
- jQuery的stop()
- Jquery学习之stop方法
- jquery之data()、stop()、delay()的语法和使用
- 关于jquery 的stop()方法
- webkit webApp 开发技术要点总结
- linux下DB2安装与卸载
- mysql 乱码解决方案
- 【数据结构】堆 Heap
- EXECUTE IMMEDIATE
- jquery之stop()的用法
- linux系统信息查看命令
- Yii学习(7)----使用with关系
- 知己知彼 防范攻击:网络攻击步骤与黑客攻击原理
- mysql 自动安装版 最新下载地址
- 黑马程序员 SqlServer触发器
- windows下配置mysql集群
- Cocos2d-x界面中嵌套android的webview
- 深入浅出OpenStack云计算平台管理(nova-compute/network)