首页 > 代码库 > 锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)
锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)
1.停止元素的动画：stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列，第二个参数代表是否直接将正在执行的动画跳转到末状态。
无参数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") ){ //判断元素是否处于动画状态 //如果当前元素没有执行动画，... }
锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。