jquery 停止动画_jQuery停止动画

jquery 停止动画

We can use jQuery stop() function to stop the currently running animation on the matched elements.

我们可以使用jQuery stop（）函数在匹配的元素上停止当前正在运行的动画。

jQuery stop（） (jQuery stop())

There are two variants of jQuery stop() function.

jQuery stop（）函数有两种变体。

stop(boolean clearQueue, boolean jumpToEnd): Default value of both the argument is false. We can pass clearQueue as true to stop the queued animation. We can pass jumpToEnd as true to complete the current animation immediately.stop（boolean clearQueue，boolean jumpToEnd）：两个参数的默认值为false。我们可以将clearQueue传递为true来停止排队的动画。我们可以将jumpToEnd作为true传递，以立即完成当前动画。
stop(String queue, boolean clearQueue, boolean jumpToEnd): Here we can pass the name of the queue to stop the animation, other two arguments are same as above.stop（String queue，boolean clearQueue，boolean jumpToEnd）：在这里我们可以传递队列的名称来停止动画，其他两个参数与上面相同。

jQuery停止动画 (jQuery stop animation)

Here is a simple example for jQuery stop animation.

这是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>

Notice that I am not passing any parameter with stop() function call, it’s because there is only one animation and I want it to stop as soon as stop button is clicked.

请注意，我没有通过stop（）函数调用传递任何参数，这是因为只有一个动画，并且我希望它在单击停止按钮后立即停止。

jQuery停止动画队列 (jQuery stop animation queue)

Here is an example where animation queue is cleared and current running animation is also stopped when stop button is clicked.

这是一个示例，其中当单击停止按钮时，清除了动画队列，并且也停止了当前正在运行的动画。

<!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>

Below image shows the above program in action.

下图显示了上面的程序正在运行。

That’s all for jQuery stop() function and jQuery stop animation example.

这就是jQuery stop（）函数和jQuery stop动画示例的全部内容。

Reference: API Doc

参考： API文档

翻译自: https://www.journaldev.com/4647/jquery-stop-animation

jquery 停止动画