jQuery stop()用法实例详解

网络编程 2021-07-04 20:00www.168986.cn编程入门
一直对s的用法一知半解,今天抽点时间学习下jQuery s()用法实例详解的相关知识,特此分享狼蚁SEO平台,供大家参考

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

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

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

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

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

$(selector).s(sAll,goToEnd)

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

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

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

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

狼蚁网站SEO优化是从网上找的一个小例子,足够帮助大家理解s()的使用了。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>s的用法案例</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').s();
});
$('#button2').click(function(){
//第二个参数默认false
$('#box').s(true);
});
$('#button3').click(function(){
$('#box').s(false,true);
});
$('#button4').click(function(){
$('#box').s(true,true);
});
})
</script>
</head>
<body>
<p><input type='button' value='开始测试' id='start'></p>
<div id="button">
<input type="button" id="button1" value="s()"/>
<input type="button" id="button2" value="s(true)"/>
<input type="button" id="button3" value="s(false,true)"/>
<input type="button" id="button4" value="s(true,true)"/> 
</div>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">s运动参数测试</div>
</body>
</html>

以上所述是长沙网络推广给大家介绍的jQuery s()用法实例详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by