stop()与clearQueue()用法与区别
jQuery中stop()与clearQueue()用法与区别
//stop() --->onle for animate
$(selector).stop(stopAll,gotoEnd)默认参数都为false
sotpAll：是否停至所有动画，false指仅停至当前动画，排队动画继续执行，true指停止当前动画并清空排队动画；
gotoEnd：是否立即完成当前动画，true立即（快速）完成当前动画再停下来。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
//clearQueue() --->remove any function attached to a standard jquery queue
停至列队中所有未执行的函数
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").queue(function () {
$(this).css("background-color","red");
$(this).dequeue();
});
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").clearQueue();
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
总结：
stop()只用于animate，clearQueue()清空的是列队所有未执行的函数，且当前函数也会按原速度执行完
