【前言】
在前台页面开发中有时候我们会需要一些比较酷的效果，这个时候使用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()停止了当前正在执行的动画，并使后续的动画立即得到了执行。
.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。