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()停止了当前正在执行的动画,并使后续的动画立即得到了执行。
.