彻底搞懂jQuery.stop()函数
来源:互联网 发布:程序员进阶之路 编辑:程序博客网 时间:2024/05/17 00:08
jQuery.stop() 函数详解
stop()
函数用于停止当前匹配元素上正在运行的动画。
默认情况下,stop()
函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画,如果当前正在执行的动画是A,则只会停止动画A的执行,不会阻止动画B和C的执行。当然,你也可以通过指定可选的选项参数来停止所有的动画。
停止动画并不是恢复到该动画执行前的状况,而是直接停止,当前动画执行到什么状态,就停留在什么状态。例如:执行一个元素高度从100px到200px的过渡动画,当高度为150px时停止了该动画,则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数,则不会执行该回调函数。
语法
jQuery 1.2 新增该函数。
jQueryObject.stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] )
参数
false
。jumpToEnd可选/Boolean类型指示是否直接完成当前动画,默认值为false
。jQuery 1.7 新增支持:参数queueName
。如果没有指定,则默认为"fx",表示jQuery标准的效果队列。
如果参数jumpToEnd
为true
,则不再缓慢执行当前动画,而是直接完成。此时,元素将会保持动画执行完毕后的状态。
返回值
stop()
函数的返回值为jQuery类型,返回当前jQuery对象本身。
示例&说明
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $("#exec").click( function(){ var $myDiv = $("#myDiv"); // 在现有高度的基础上增加300px (如果原来是100px,增加后就是400px) $myDiv.animate( { height: "+=300px" }, 2000 ); $myDiv.animate( { width: "50%" }, 1000 ); $myDiv.animate( { width: "200px", height: "100px" }, 1000 ); } ); $("#stop").click( function(){ var v = $("#animation").val(); var $myDiv = $("#myDiv"); if(v == "1"){ $myDiv.stop( ); // 停止当前动画,不清空队列 }else if(v == "2"){ $myDiv.stop( true ); // 停止当前动画,清空队列(停止全部) }else if(v == "3"){ $myDiv.stop( "fx", true ); // 等同于"2" }else if(v == "4"){ $myDiv.stop( true, true ); // 清空队列,直接完成当前动画 } } ); }) </script></head><body> <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="执行动画" /> <input id="stop" type="button" value="停止动画" /> </p> <div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div></body></html>
阅读全文
0 0
- 彻底搞懂jQuery.stop()函数
- jQuery stop()函数详解
- 【JQuery】stop()函数
- 彻底搞懂 RxJava
- 彻底搞懂CoordinatorLayout
- 彻底搞懂CNN
- 彻底搞懂CNN
- 彻底搞懂CNN
- 彻底搞懂python函数传值or引用问题
- 嗯,让我们彻底搞懂C/C++函数指针吧
- 彻底搞懂C++多态虚函数等问题
- jquery animate stop函数解析
- 《彻底搞懂C指针》
- 彻底搞懂字符编码
- 彻底搞懂反转索引
- 彻底搞懂Oracle字符集
- 彻底搞懂Java ClassLoader
- 彻底搞懂Oracle字符集
- laravel数据库数量加减
- 使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。
- java io 节点流和处理流
- Mysql5.7新特性(学习笔记)
- java读取properties文件的快捷方法
- 彻底搞懂jQuery.stop()函数
- 项目——通过自动回复机器人学Mybatis(深入解析拦截器源码)(八)
- ApiDemos学习知识点之media-MediaPlayerDemo(12)
- Android图片缓存之Bitmap详解
- 文件操作 StreamReader()和TextReader()
- Android开发6.0权限的封装
- 【学习笔记】jQuery中的prop()、attr()、data()方法的对比
- JS中的继承
- 《GNU_Octave_Beginner_s_Guide》读书笔记1: 环境设置