jQuery的stop()方法回顾总结

【前言】

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

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

 

【主体】

      （1）官方文档解释：

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

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

 

      （2）应用案例解析：

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

         

       （3）stop()方法解析：

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

 

      （4）参数解析：

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

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

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

 

      （5）场景模拟：

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

        整体页面效果图如下：

       测试结果：

       通过测试我们不难发现

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

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

       测试总结：

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

 

 

 

 

.