jQuery stop()用法实例详解


Posted in Javascript onJuly 28, 2016

近期查看前辈的代码,发现在使用animate()的时候前面需要加上stop(),来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,今天查了下stop()中参数的意义和具体使用方法,分享给大家。

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

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

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

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

$(selector).stop(stopAll,goToEnd)

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

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

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

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

下面是从网上找的一个小例子,足够帮助大家理解stop()的使用了。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>stop的用法案例</title>
<style type="text/css">
#animater{
width: 150px;
background:activeborder;
border: 1px solid black;
/*为了移动,需设置此属性*/
position: relative;
}
</style>
<script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
// 点击不同的button执行不同的操作
$('#button1').click(function(){
//默认参数是false,不管写一个false还是两个false还是没写false效果一样
$('#box').stop();
});
$('#button2').click(function(){
//第二个参数默认false
$('#box').stop(true);
});
$('#button3').click(function(){
$('#box').stop(false,true);
});
$('#button4').click(function(){
$('#box').stop(true,true);
});
})
</script>
</head>
<body>
<p><input type='button' value='开始测试' id='start'></p>
<div id="button">
<input type="button" id="button1" value="stop()"/>
<input type="button" id="button2" value="stop(true)"/>
<input type="button" id="button3" value="stop(false,true)"/>
<input type="button" id="button4" value="stop(true,true)"/> 
</div>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop运动参数测试</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery stop()用法实例详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
AngularJS中的表单简单入门
Jul 28 #Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 #Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 #Javascript
AngularJS 模块详解及简单实例
Jul 28 #Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
车间调度岗位职责
2013/11/30 职场文书
班主任评语大全
2014/04/26 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
学习十八大演讲稿
2014/09/15 职场文书
受伤赔偿协议书
2014/09/24 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
《颐和园》教学反思
2016/02/19 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python