jQuery停止动画
时间：2020-02-23 14:46:14 来源:igfitidea点击:
我们可以使用jQuery stop()函数来停止匹配元素上当前正在运行的动画。
jQuery stop()
jQuery stop()函数有两种变体。
stop(boolean clearQueue，boolean jumpToEnd)：两个参数的默认值为false。
我们可以将clearQueue传递为true来停止排队的动画。
我们可以将jumpToEnd作为true传递，以立即完成当前动画。stop(String queue，boolean clearQueue，boolean jumpToEnd)：在这里我们可以传递队列的名称来停止动画，其他两个参数与上面相同。
jQuery停止动画
这是jQuery停止动画的简单示例。
<!DOCTYPE html>
<html>
<head>
<title> jQueryClear Queued Function</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("#startbtn").click(function(){
$("div").animate({height:200}, 2000 );
});
$("#stopbtn").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<button id="startbtn">Start</button>
<button id="stopbtn">Stop</button>
<div style="background:green;height:90px;width:90px;">
</div>
</body>
</html>
请注意，我没有通过stop()函数调用传递任何参数，这是因为只有一个动画，并且我希望它在单击停止按钮后立即停止。
jQuery停止动画队列
这是一个示例，其中，当单击停止按钮时，清除了动画队列，并且也停止了当前正在运行的动画。
<!DOCTYPE html>
<html>
<head>
<title> jQueryClear Queued Function</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("#startbtn").click(function(){
$("div").animate({height:200}, 2000 );
$("div").slideUp(2000 );
$("div").slideDown(2000 );
$("div").animate({width:300},1500);
$("div").animate({height:100},1500);
$("div").animate({width:100},1500);
});
$("#stopbtn").click(function(){
//$("div").clearQueue();
$("div").stop(true, false);
});
});
</script>
</head>
<body>
<button id="startbtn">Start</button>
<button id="stopbtn">Stop</button>
<div style="background:green;height:90px;width:90px;">
</div>
</body>
</html>
