实例说明
1、点击按钮(stop()),由于两个参数都是false。所以点击发生时,animater没有跳到当前动画(动画1)的最终效果,而直接进入动画2,然后动画3,4,5.直至完成整个动画。
2、点击按钮(stop(true)),由于第一个是true,第二个是false,所以animater立刻全部停止了,动画不动了。
3、点击按钮(stop(false,true)),由于第一个是false,第二个是true,所以点击发生时,animater身处的当前动画(动画1)停止并且animater直接跳到当前动画(动画1)的最终末尾效果位置,接着正常执行下面的动画(动画2,3,4,5),直至完成整个动画。
3、点击按钮(stop(true,true)),由于两个都是true,所以点击发生时,animater跳到当前动画(动画1)的最终末尾效果位置,然后,全部动画停止。
三、jquery stop()在工作中的应用
一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏 ,如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累”,当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。
解决方法
在写动画效果的代码前加入stop(true,true),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,完成当前的动画(跳至当前动画的最终效果位置)。
最后给大家介绍jquery delay()
jquery中delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:$(selector).delay(duration)其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执 ,delay与setTimeout函数还是有区别的,delay是更适合某些使用情况。
可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间,从而在上一个动画效果执行后延迟下一个动画效果的执行时间。
一、语法
$(selector).delay(speed,queueName)
1、参数说明
2、备注
延时时间(duration参数)是以毫秒为单位的,数值越大,动画越慢,不是越快。
字符串 ‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时。
二、delay()实例
HTML
<p>动画效果:
<select id="animation">
<option value="1">动画1</option>
<option value="2">动画2</option>
<option value="3">动画3</option>
<option value="4">动画4</option>
</select>
<input id="exec" type="button" value="执行动画" >
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>










