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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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 HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
js获取class的所有元素
2013/03/28 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python 日期排序的实例代码
2019/07/11 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
教师节商场活动方案
2014/02/13 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
成本会计实训报告
2014/11/05 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
专职安全员岗位职责
2015/04/11 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Java 关于String字符串原理上的问题
2022/04/07 Java/Android