jQuery stop()用法实例详解
更新时间：2016年07月28日 10:15:19 作者：简一118
一直对stop的用法一知半解，今天抽点时间学习下jQuery stop()用法实例详解的相关知识，特此分享脚本之家平台，供大家参考
近期查看前辈的代码，发现在使用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()用法实例详解 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
deferred对象是jQuery的回调函数解决方案，jQuery之前的版本中异步回调这块做的不是很好，所以后期补上了该解决方案。接下来通过本文给大家介绍jQuery中的derferred使用方法，非常不错，需要的朋友参考下2017-03-03
这篇文章主要介绍了jQuery实现的鼠标响应缓冲动画效果,涉及jQuery事件响应、数值运算及页面元素动态操作相关技巧,需要的朋友可以参考下2018-02-02
大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢2010-12-12
最近，有需要做一个动态的给table，添加行，用了点时间，算是做成了。已测试过，但如果发现有什么bug，可以留言，欢迎拍砖。大家一起进步。2011-03-03
在使用PDFObject.js时，由于后台需要转换数据，在前台显示的时候，有很长一段时间显示空白页面，所以想到写一个假的加载动画，下面看下实现代码2016-12-12
这篇文章主要介绍了jquery移动节点的实现方法,主要涉及append()方法的使用技巧,需要的朋友可以参考下2015-01-01
jQuery动态设置form表单的enctype值(实现代码)
本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍，需要的朋友参考下2013-07-07
本文重点给大家介绍了jQuery中的2个函数hover和toggle的使用方法和示例，非常的简单实用，推荐给小伙伴们参考下。2015-02-02
slides是一款强大的，专业的幻灯片组件，能够全方位对幻灯片的速度控制，本文通过代码实例给大家讲解jquery.slides.js，感兴趣的朋友一起学习2015-11-11
本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。2009-11-11
最新评论