jQuery的stop()方法回顾总结

【前言】

      在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用JQuery中的动画来实现便显得非常的简单。最近在工作中用到了一个停止动画的方法"stop()",以前只是用也没有过多的关注。

      这几天再次碰到,便翻开文档测试了一番,也有了一些新的认识。对这个方法有了全新的了解,在这里把我的测试记录下来。

【主体】

      (1)官方文档解释:

                在JQuery文档中对这个方法的解释是这样的:

               停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行。这个怎么理解呢?

      (2)应用案例解析:

              常用的一个效果,二级下拉菜单→当鼠标滑过时显示二级菜单,但是鼠标移走时,二级菜单一般都是先显示完再上滑回去。这时我们可以用stop()方法来控制元素,当鼠标移走时,即使二级菜单只滑动到一半,接下来可以让它停止下滑,直接上滑。这样用户体验度更好,也很好解决了slideDown()和slideUp()反复执行的问题。

         

       (3)stop()方法解析:

stop([clearQueue],[jumpToEnd]);
clearQueue:如果设置成true,则清空队列,可以立即结束动画。
jumpToEnd:如果设置成true,则完成队列,可以立即完成动画。可选,默认是false


jQuery的stop()方法回顾总结
 

      (4)参数解析:

          查看文档可以知道这个时候参数依次为:[clearQueue],[gotoEnd]  并且都为可选,类型都为Boolean。

          ①clearQueue:如果设置成true,则清空队列。可以立即结束动画。

          ②gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

      (5)场景模拟:

       假设有一个元素需要在背景中进行移动,然后回到起始位置。页面中有三个按钮,分别负责“开始移动”,“采用了stop方法的回归”,“没有采用stop方法的回归”。

        整体页面效果图如下:

jQuery的stop()方法回顾总结

       测试结果:

       通过测试我们不难发现

           ①有stop,当蓝色方块在向右侧移动的时候,点击按钮,方块会立即往回返(向左侧移动)。

           ②没有stop,当蓝色方块在向右侧移动的时候,点击按钮,方块会等到完全移动到指定位置后才往回返(向左侧移动)。

       测试总结:

       stop()停止了当前正在执行的动画,并使后续的动画立即得到了执行。

.

相关推荐