详解jQuery停止动画——stop()方法的使用

 更新时间:2016年12月14日 14:48:44   作者:浅岸  
本文主要对jQuery停止动画——stop()方法的使用进行详细介绍,对学习jQuery动画有很好的帮助,下面就跟小编一起来看下吧

很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时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;">呵呵</div> 
 /* 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"}, 200) //如果在此时触发了光标的移出事件
           //将执行下面的动画
   .animate({width: "300"},300); //而非光标移出事件中的动画
 },function() {
  $(this).stop()
   .animate({height: "22"}, 200)
   .animate({width: "60"},300);
 });

此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画,如果动画正执行在第1阶段(改变height的阶段),则触发光标移出事件后,只会停止当前的动画,并继续进行下面的.animate({width: "300"},300)动画,而光标移出事件中的动画要等这个动画结束后才会继续执行,这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。

(2)stop(true),此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码,就能实现预期的效果。

$("#panel").hover(function() {
  $(this).stop(true)
   .animate({height: "150"}, 200) //如果在此时触发了光标的移出事件
           //直接跳过后面的动画队列
   .animate({width: "300"},300); 
 },function() {
  $(this).stop()
   .animate({height: "22"}, 200)
   .animate({width: "60"},300);
 });

(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实现冻结表格行和列

    jQuery实现冻结表格行和列

    本文给大家分享的是前些日子做的项目中的一个客户的特殊要求,很少遇到,查询了好久的度娘,才算找到解决方案,这里分享给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • JQuery统计input和textarea文字输入数量(代码分享)

    JQuery统计input和textarea文字输入数量(代码分享)

    本文主要介绍了jQuery实现统计输入文字个数的方法,具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    这篇文章主要介绍了jQuery实现响应鼠标事件的图片透明效果,涉及jQuery鼠标事件及fadeTo函数的相关使用技巧,需要的朋友可以参考下
    2016-06-06
  • jQuery+CSS实现滑动的标签分栏切换效果

    jQuery+CSS实现滑动的标签分栏切换效果

    这篇文章主要介绍了jQuery实现滑动的标签分栏切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery中DOM操作实例分析

    jQuery中DOM操作实例分析

    这篇文章主要介绍了jQuery中DOM操作方法,实例分析了dom对象的创建、属性的修改、样式的修改、动态绑定事件等技巧,需要的朋友可以参考下
    2015-01-01
  • 使用jQuery动态设置单选框的选中效果

    使用jQuery动态设置单选框的选中效果

    这篇文章主要介绍了使用jQuery动态设置单选框的选中效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • 菊花转动的jquery加载动画效果

    菊花转动的jquery加载动画效果

    我们这次给大家带来的是关于用jquery实现菊花转动的加载动画效果,以及相关实例代码,有兴趣的朋友可以学习下。
    2018-08-08
  • jQuery模仿京东/天猫商品左侧分类导航菜单效果

    jQuery模仿京东/天猫商品左侧分类导航菜单效果

    在京东或者是天猫上可以看到左侧分类导航菜单,当鼠标滑过导航分类时,会出现详细分类模块,鼠标移开就会恢复默认样式,下面小编给大家带来了基于 mouseenter()和mouseleave()实现仿京东/天猫商品左侧分类导航菜单效果,一起看看吧
    2016-06-06
  • 省市二级联动小案例讲解

    省市二级联动小案例讲解

    这篇文章主要介绍了省市二级联动小案例讲解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • jQuery实现穿梭框效果

    jQuery实现穿梭框效果

    这篇文章主要为大家详细介绍了jQuery实现穿梭框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论