jQuery 效果 - stop() 方法

jQuery 效果 - stop() 方法

实例

停止当前正在运行的动画：

$("#stop").click(function(){
  $("#box").stop();
});

定义和用法

stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

实例

停止动画队列

停止被选元素的所有加入队列的动画。

<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").animate({height:100},"slow");
    $("#box").animate({width:100},"slow");
  });
  $("#stop").click(function(){
    $("#box").stop(true);
  });
});
</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>

在当前动画完成后停止动画队列

停止被选元素的所有加入队列的动画，但允许完成当前动画。

<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").animate({height:100},"slow");
    $("#box").animate({width:100},"slow");
  });
  $("#stop").click(function(){
    $("#box").stop(true,true);
  });
});
</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>