井井客

搜索

JQ判断元素是否处于animate动画状态

先了解一下JQ animate动画如何停止,用stop停止animate动画的几种情况,另外判断元素是否处于animate动画状态,这些感觉还是需要知道一下的。

JQ判断元素是否处于animate动画状态

1、停止元素的动画

JQ使用stop([cleanQueue, gotoEnd])来停止动画,参数(1)表示是否要清空未执行完的动画队列,参数(2)表示是否直接将正在执行的动画跳转到最后状态,而无参数时表示立即停止当前的动画,如果接下来还有动画则以当前状态开始接下来的动画。

举例:为元素绑定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") ){   //判断元素是否处于动画状态
  //如果当前元素没有执行动画,...  
}

转载自:http://www.cnblogs.com/xuelixiang/p/4808347.html

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:JQ判断元素是否处于animate动画状态
本文链接:http://www.jingjingke.com/c/21206.html

上一篇:原生JS操作class类
下一篇:适用三元条件运算符

文章分类

相关阅读

随便看看