关闭

jquery stop方法让animate执行动画前,先停止之前的动画再执行新动画

来源:网络 文章列表 2018-12-25 8
本文介绍了,通过stop方法,让正在运行的jquery动画停止执行。

很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了。

定义和用法

stop() 方法停止当前正在运行的动画。

 

语法

$(selector).stop(stopAll,goToEnd)
参数 描述
stopAll 可选。为Boolean值(true或false)。代表是否清空未执行完的动画队列
goToEnd

可选。gotoEnd代表是否直接将正在执行的动画跳转到末状态。

该参数只能在设置了 stopAll 参数时使用。

(1)直接使用使用 stop() 方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。比如下面例子:

<div id="test" style="width: 60px;height: 22px;background-color: #eee;border: 1px solid #abcdef;font-size: 12px;">web教程网</div> 
 
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>
$("#test").hover(function() {
  $(this).stop().animate({height: "150"}, 200);
},function() {
  $(this).stop().animate({height: "22"}, 300);
});
</script>

此时,在光标移入时,触发光标移入动画(在0.2秒内height变为150),在动画还没执行完的时候光标移出,则停止当前动画(可能height还未到达150),执行光标移出触发的动画(在0.3秒内height变回22)。反之亦然。

如果遇到组合动画,例如:

$("#test").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),此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码,就能实现预期的效果。

$("#test").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()方法对上述的动画都适用。

阿里云618优惠卷大放送

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论