jQuery stop animation
jQuery stop() method
jQuery stop() method is used to stop animations or effects before they are completed.
The stop() method works with all jQuery effect functions, including slides, fades, and custom animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which stops only active animations and allows any queued animations to execute backwards.
The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.
So, by default, stop() will clear the current animation specified on the selected element.
The following example demonstrates the stop() method without parameters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideDown(5000);
});
$("#stop").click(function(){
$("#div2").stop();
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑動(dòng)</button>
<div id="div1">點(diǎn)我向下滑動(dòng)面板</div>
<div id="div2">我們必須接受失望，因?yàn)樗怯邢薜?，但千萬(wàn)不可失去希望，因?yàn)樗菬o(wú)窮的</div>
</body>
</html>Run the program to try it
jQuery stop() animation (With parameters)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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">開(kāi)始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止動(dòng)畫，但完成動(dòng)作</button>
<p>點(diǎn)擊 "開(kāi)始" 按鈕開(kāi)始動(dòng)畫。</p>
<p>點(diǎn)擊 "停止" 按鈕停止當(dāng)前激活的動(dòng)畫，但之后我們能再動(dòng)畫隊(duì)列中再次激活。</p>
<p>點(diǎn)擊 "停止所有" 按鈕停止當(dāng)前動(dòng)畫，并清除動(dòng)畫隊(duì)列，所以元素的所有動(dòng)畫都會(huì)停止。</p>
<p>點(diǎn)擊 "停止動(dòng)畫，但完成動(dòng)作" 快速完成動(dòng)作，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>Run the program and try it
