jquery stop()方法
来源:互联网 发布:sony系统下载软件 编辑:程序博客网 时间:2024/06/05 09:49
jQuery中stop()函数用于停止当前匹配元素上正在运行的动画。
停止动画并不是恢复到该动画执行前的状况,而是直接停止,当前动画执行到什么状态,就停留在什么状态。
例如:执行一个元素高度从100px到200px的过渡动画,当高度为150px时停止了该动画,则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数,则不会执行该回调函数。
一、jquery stop()语法
$(selector).stop(stopAll,goToEnd)
参数说明
1、stopAll
可选。代表是否要清空未执行完的动画队列。
意思就是如果该参数值为true,则会停止所有后续动画或事件。如果该参数值为false,则只停止被选元素当前执行的动画,后续动画不受影响。因此,该参数一般都为false。
如果使用stop()方法,则会立即停止当前正在运行的动画,如果接下来还有动画等待执行,则以当前状态开始接下来的动画。
2、goToEnd
可选。代表是否直接将正在执行的动画跳转到当前动画的末尾。
规定是否允许完成当前动画,该参数只能在设置了stopAll参数时使用
3、备注
默认情况下,不写参数,则会被认为两个参数都是false。
二、jquery stop()实例
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>jquery stop()</title><script type="text/javascript">$(function(){ $("button:eq(0)").click(function(){ $("#panel").animate({height:"150" }, 1000).animate({width:"300" }, 1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"}, 1000); }); //stop([clearQueue][,gotoEnd]); //语法结构 $("button:eq(1)").click(function(){ $("#panel").stop();//停止当前动画,继续下一个动画 }); $("button:eq(2)").click(function(){ $("#panel").stop(true);//清除元素的所有动画 }); $("button:eq(3)").click(function(){ $("#panel").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画 }); $("button:eq(4)").click(function(){ $("#panel").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态 });})</script></head><body><button>开始一连串动画</button><button>stop()</button><button>stop(true)</button><button>stop(false,true)</button><button>stop(true,true)</button><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery。 </div></div></body></html>
实例说明
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() http://www.studyofnet.com/news/1031.html
- jquery stop()方法
- jQuery 效果 - stop() 方法
- Jquery学习之stop方法
- 关于jquery 的stop()方法
- jquery 中stop()方法总结
- jQuery动画animate的stop方法
- jquery动画stop()方法简介
- jquery stop()方法的讲解使用
- jQuery stop()
- jQuery中的stop()方法解决动画重叠问题
- jQuery动画animate停止方法stop使用介绍
- 【jQuery】调用stop()方法停止当前所有动画效果
- 转载:jQuery停止动画——stop()方法的使用
- jquery之stop()
- Jquery之stop()应用
- jquery stop 应用
- jQuery stop()函数详解
- jquery的stop()
- EXP/IMP】EXP/IMP过程中的字符集问题
- Http编程
- META-INF和WEB-INF
- 前端不为人知的一面–前端冷知识集锦
- 一个简单的poster样式
- jquery stop()方法
- iOS调用程序外地图导航
- Eclipse 项目以非gradle方式导入Android Studio
- cocos2d-x 3.x的底层渲染机制
- html5 video标签全屏
- iOS面试专题
- WinCE6.0BSP移植(一)
- InnoSetup--修改安装过程的界面显示语言
- 王菲献唱《港囧》主题曲 徐峥赵薇杜鹃陷情路危机