欢迎来到HELLO素材网! 南京网站制作选择顺炫科技
丰富的DIV CSS模版、JS,jQuery特效免费提供下载
当前位置:主页 > 建站教程 > JS教程 >

jQuery stop()用法以及案例展示

发表于2014-05-09 23:46| 次阅读| 来源管理员| 作者管理员

摘要:从写运动效果以来对于stop()的用法一直是一知半解,只知道有时使用animate()的时候前面需要加上stop()来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,只知道如果fal

从写运动效果以来对于stop()的用法一直是一知半解,只知道有时使用animate()的时候前面需要加上stop()来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,只知道如果false不行就用true来代替,就这样逐个试一下。今天有时间就来仔细研究一下stop()中参数的具体使用方法。

stop() 方法停止当前正在运行的动画。

$(selector).stop(stopAll,goToEnd)

stopAll:可选。规定是否停止被选元素的所有加入队列的动画。

goToEnd:可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

第一个参数的意思是是否清空动画序列,也就是停止的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;

第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一半,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候。

运行下面代码,来体会true,false的细微差别



运行代码保存代码提示:您可以先修改部分代码再运行


(运行页面截图)


stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画。

stop(true,true):停止被选元素的所有加入队列的动画,但允许完成当前动画。

stop()等价于stop(false,false):停止被选元素当前的动画,但允许完成以后队列的所有动画。

stop(false,true):立即结束当前的动画到最终效果,然后完成以后队列的所以动画


具体案例





运行代码保存代码提示:您可以先修改部分代码再运行




还有一种案例是制作下拉菜单(当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏)

如果快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。

解决方法:在写动画效果的代码animate前加入stop(true,true),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)


如有问题,欢迎留言探讨!