jQuery stop() 메소드
jQuery stop() 메소드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용됩니다.
stop() 메서드는 슬라이드, 페이드 및 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능과 함께 작동합니다.
구문:
$(selector).stop(stopAll,goToEnd);
선택적인 stopAll 매개변수는 애니메이션 대기열을 지워야 하는지 여부를 지정합니다. 기본값은 false이며 활성 애니메이션만 중지하고 대기열에 있는 애니메이션이 뒤로 실행되도록 허용합니다.
선택적인 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.
따라서 기본적으로 stop()은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.
다음 예는 매개변수 없는 stop() 메소드를 보여줍니다.
<!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">停止滑动</button>
<div id="div1">点我向下滑动面板</div>
<div id="div2">我们必须接受失望，因为它是有限的，但千万不可失去希望，因为它是无穷的</div>
</body>
</html>프로그램을 실행하여 사용해 보세요
jstop() 애니메이션 쿼리(매개변수 포함)
<!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">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止动画，但完成动作</button>
<p>点击 "开始" 按钮开始动画。</p>
<p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
<p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
<p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>프로그램을 실행하여 사용해 보세요
