停止animate动画和判断是否处于动画状态
2015-09-14 22:08
323 查看
1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态。
无参数stop():立即停止当前的动画,如果接下来还有动画则以当前状态开始接下来的动画。
举例:为元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完,就移出光标,则移出的动画效果就会被放到队列,等移入的动画完成后在执行。因此如果光标的移入移出速度太快,就会导致动画效果与移动光标不一致的情况。
此时如果在移入移出动画之前加入stop(),就能解决这个问题了。
如果遇到组合动画:
此时需要用stop的第一个参数,设置为true,程序会把当前元素接下来尚未执行的动画队列都清空。
第二个参数gotoEnd可以让当前的动画直接达到结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态的情况。
stop(false, true) : 当前的动画直接达到末状态。
stop(true, true) : 当前的动画直接达到末状态并清空当前对象的动画队列。
注意:jQuery只能设置正在执行的动画的最终状态,不能直接达到未执行动画的最终状态。
无论怎么设置stop()值,均无法在改变"width"或者"height"时,将此div的元素末状态改为300*150大小,并且透明度0.2。既stop只能改变当前正在执行的动画。
2.判断元素是否处于动画状态:
在使用animate()方法的时候,要避免动画积累导致动画与用户行为不一致的情况,需要判断当前元素是否正在执行动画。
无参数stop():立即停止当前的动画,如果接下来还有动画则以当前状态开始接下来的动画。
举例:为元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完,就移出光标,则移出的动画效果就会被放到队列,等移入的动画完成后在执行。因此如果光标的移入移出速度太快,就会导致动画效果与移动光标不一致的情况。
此时如果在移入移出动画之前加入stop(),就能解决这个问题了。
$("div").hover(function(){ $(this).stop().animate({"height":"300px", "width":"300px"}, 200); }, function(){ $(this).stop().animate({"height":"100px", "width":"100px"}, 200); });
如果遇到组合动画:
$("div").hover(function(){ $(this).stop().animate({"height":"300px"}, 200) /*如果在此时触发了光标的移出事件,将执行下边的动画,而非光标移出的动画,以为stop()是立即停止当前的动画进入下一个动画。*/ .animate({"width":"300px"}, 200); }, function(){ $(this).stop().animate({"height":"100px"}, 200) .animate({"width":"100px"}, 200); });
此时需要用stop的第一个参数,设置为true,程序会把当前元素接下来尚未执行的动画队列都清空。
$("div").hover(function(){ $(this).stop(true).animate({"height":"300px"}, 200) /*如果在此时触发了光标的移出事件,会直接停止当前的动画,并且清空了后边的动画,这样就会执行光标移出的动画了。*/ .animate({"width":"300px"}, 200); }, function(){ $(this).stop(true).animate({"height":"100px"}, 200) .animate({"width":"100px"}, 200); });
第二个参数gotoEnd可以让当前的动画直接达到结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态的情况。
stop(false, true) : 当前的动画直接达到末状态。
stop(true, true) : 当前的动画直接达到末状态并清空当前对象的动画队列。
注意:jQuery只能设置正在执行的动画的最终状态,不能直接达到未执行动画的最终状态。
$("div").animate({"width" : "200px"}, 200) .animate({"height" : "200px"}, 200) .animate({"opacity", "0.2"}, 200);
无论怎么设置stop()值,均无法在改变"width"或者"height"时,将此div的元素末状态改为300*150大小,并且透明度0.2。既stop只能改变当前正在执行的动画。
2.判断元素是否处于动画状态:
在使用animate()方法的时候,要避免动画积累导致动画与用户行为不一致的情况,需要判断当前元素是否正在执行动画。
if(! $(element).is(":animated") ){ //判断元素是否处于动画状态 //如果当前元素没有执行动画,... }
相关文章推荐
- 条款23:宁一 non-member no-friend 替换member函数(prefer non-member non-friend functions to members functions)
- 内存考点
- Android网络连接——ConnectivityManager、WebView
- Apache Camel异常处理
- ZigZag - 曲折字符串
- 2015.9.14
- 《Java编程思想》读书笔记2.一切都是对象
- 0912Android基础网络技术之Http协议访问网络
- Fiddler无法正常对360浏览器、谷歌浏览器抓包的原因及处理方法
- Struts2中dispatcher与redirect的区别
- 重置win7系统
- XHTML表单
- 使用RMAN来克隆数据库
- python简单爬虫(二)
- imagebutton的src和background有什么区别呢?
- linux常用命令(32): /etc/group文件详解
- MySQL数据文件及常用工具
- JAVA基础学习--面向对象试题
- 第十五篇:OC中 分类,关键字protocol 协议的声明与应用
- USACO-Section 2.2 Runaround Numbers (枚举)