转载:jQuery停止动画——stop()方法的使用
来源:互联网 发布:元朝有多强大 知乎 编辑:程序博客网 时间:2024/06/01 10:03
jQuery停止动画——stop()方法的使用
转载地址
很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了。 stop()方法的语法结构为: stop([clearQueue],[gotoEnd]); 参数clearQueue和gotoEnd都是可选参数,为Boolean值(true或false)。clearQueue代表是否清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态。(1)直接使用使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。比如下面例子:复制代码 <!-- html部分 --> <div id="panel" style="width: 60px;height: 22px;background-color: #eee;border: 1px solid #abcdef;font-size: 12px;">呵呵</div> <!-- 引入jquery库 --> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>复制代码复制代码 /* js部分 */ $("#panel").hover(function() { $(this).stop().animate({height: "150"}, 200); },function() { $(this).stop().animate({height: "22"}, 300); });复制代码 此时,在光标移入时,触发光标移入动画(在0.2秒内height变为150),在动画还没执行完的时候光标移出,则停止当前动画(可能height还未到达150),执行光标移出触发的动画(在0.3秒内height变回22)。反之亦然。如果遇到组合动画,例如:复制代码 $("#panel").hover(function() { $(this).stop() .animate({height: "150"}, 5000) //如果在此时触发了光标的移出事件 //将执行下面的动画 .animate({borderWidth: "20px"},3000); //而非光标移出事件中的动画 },function() { $(this).stop() .animate({width: "300"}, 2000) .animate({fontSize: "24px"},3000); });复制代码 此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画,如果动画正执行在第1阶段(改变height的阶段),则触发光标移出事件后,只会停止当前的动画,并继续进行下面的.animate({borderWidth: "20px"},3000)动画,而光标移出事件中的动画要等这个动画结束后才会继续执行,这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。(2)stop(true),此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码,就能实现预期的效果。复制代码 $("#panel").hover(function() { $(this).stop(true) .animate({height: "150"}, 5000) //如果在此时触发了光标的移出事件 //直接跳过后面的动画队列 .animate({borderWidth: "20px"},3000); },function() { $(this).stop(true) .animate({width: "300"}, 2000) .animate({fontSize: "24px"},3000); });复制代码(3)第2个参数(gotoEnd)可以用于让正在执行的动画直接到达结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态的情况,可以通过stop(false,true)这种方式来让当前动画直接到达末状态。(4)两者结合起来stop(true,true),即停止当前动画并直接到达当前动画的末状态,并清空动画队列。(5)注意,jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达执行动画队列最终状态的方法。例如有一组动画: $("div.content") .animate({width: "300"}, 200) .animate({height: "150"}, 300) .animate({opacity: "0.2"}, 200); 无论怎么设置stop()方法,均无法再改变"width"或者"height"时,将此<div>元素的末状态变成300*150大小,并且设置透明度为0.2。温馨提示: jQuery中的动画有show()、hide()、fadeIn()、fadeOut()、slideDown()、slideUp()、animate()等等。stop()方法对上述的动画都适用。参考自《锋利的jQuery第二版》
阅读全文
0 0
- 转载:jQuery停止动画——stop()方法的使用
- jQuery动画animate停止方法stop使用介绍
- 【jQuery】stop( ) 停止动画
- Jquery----停止动画stop
- jQuery 停止动画 stop()
- jQuery中停止动画stop
- 【jQuery】调用stop()方法停止当前所有动画效果
- jquery 停止动画 stop的几种用法
- jquery 停止动画 stop的几种用法
- jQuery动画animate的stop方法
- jquery stop()停止当前所有动画效果
- jQuery学习教程八: jQuery 停止动画stop
- jquery stop()方法的讲解使用
- jq stop(停止动画)
- java中的interrupt和stop方法——java中线程停止的方法
- 不使用stop方法停止线程,停止线程的最佳办法
- jquery动画stop()方法简介
- jQuery 效果(2)——停止动画
- C语言--字符转整数
- django加载css、js等内容
- javascript中的for in循环和for循环的使用
- 认识HTML
- shell排序
- 转载:jQuery停止动画——stop()方法的使用
- 奋斗,奋斗,奋斗
- vue + vuex 的状态管理的简单使用
- LINUX学习之ZABBIX
- 免杀技术有一套(免杀方法大集结)(Anti-AntiVirus)
- HTML设置文字段落
- IOI96 最长前缀
- 二分法插入排序
- Accessing shader properties in Cg/HLSL //访问cg/hlsl中的着色属性