Home >Web Front-end >Front-end Q&A >What is the use of jquery stop() method?
What is the use of jquery stop() method?
- 青灯夜游Original
- 2022-03-01 18:32:382918browse
In jquery, the stop() method is used to stop the currently running animation effect for the selected element. The syntax is "$(selector).stop(stopAll,goToEnd)"; the parameters stopAll and goToEnd are both available. Select parameters, their values are all Boolean values, and the default values are false.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
In jquery, the stop() method is used to stop the currently running animation effect for the selected element.
Syntax:
$(selector).stop(stopAll,goToEnd)
stopAll and goToEnd are optional parameters, their values are Boolean values, and the default values are false. stopAll means to stop the queue animation. When the value is false, only the current animation is stopped; when the value is true, the current animation and all subsequent queue animations are stopped. goToEnd means jumping the animation to the final state of the current animation effect.
There are 4 forms of stop() method, as shown in Table 1.
| Form | Description |
|---|---|
| stop() | Equivalent to stop(false, false), it only stops the current animation, and subsequent animations can continue to execute |
| stop(true) | Equivalent to stop(true, false), stop the current animation and stop subsequent animations |
| stop(true, true) | Current animation Continue execution, only stop the following animation |
| stop(false, true) | Stop the current animation, jump to the last animation, and execute the last animation |
Generally speaking, in actual development, we only use the first parameter of the stop() method, and the second parameter is rarely used.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
$(function () {
$("#btn-start").click(function () {
$("div").animate({ "width": "200px" }, 2000)
.animate({ "background-color": "red" }, 2000)
.animate({ "height": "200px" }, 2000)
.animate({ "background-color": "blue" }, 2000);
});
$("#btn-stop").click(function () {
$("div").stop();
})
})
</script>
</head>
<body>
<input id="btn-start" type="button" value="开始" />
<input id="btn-stop" type="button" value="停止" /><br />
<div></div>
</body>
</html>The preview effect is shown in the figure below.
In this example, we define 4 animations using the animate() method. After we click the [Start] button, if we click the [Stop] button again after a while, it will immediately stop the currently executed animation (that is, stop the current animate() method), and then jump to the next animation (that is, the next animate() method).
If you click the [Stop] button again, it will jump to the next animation, and so on. Friends can test it by themselves to feel it.
If you want to stop all queue animations, you can achieve this by defining the first parameter of the stop() method as true. The code is as follows:
$("#btn-stop").click(function () {
$("div").stop(true);
})Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").hover(function () {
$(this).animate({ "height": "150px" }, 500);
}, function () {
$(this).animate({ "height": "50px" }, 500); //移出时返回原状态
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>The preview effect is shown in the figure below.
In this example, we use the hover() method to define the animation effect when the mouse pointer moves in and out. When we move elements in or out quickly, we will find a very strange bug: the element will keep getting longer or shorter! In other words, the animation will continue to execute and cannot be stopped at all.
This kind of "can't stop" bug is often encountered in actual development, so friends must pay special attention to it. Actually, this bug is caused by animation accumulation. In jQuery, if an animation is not completed, it will be added to the "animation queue". In this example, every time an element is moved in or out, an animation will be generated. If the animation has not been completed, it will be added to the animation queue, and then the animation that has not been completed will continue to be executed until all animations are completed. Finished.
For this bug, we only need to add the stop() method before the animation generated by moving in or out elements is executed, and it can be easily solved. The final modified code is as follows.
$("div").hover(function () {
$(this).stop().animate({ "height": "150px" }, 500);
}, function () {
$(this).stop().animate({ "height": "50px" }, 500); //移出时返回原状态
})For this kind of bug caused by animation accumulation, we can also use is(":animated") to determine the current animation status and solve it. The is(":animated") method will be introduced in detail later.
In fact, jQuery also has a method to interrupt animation-finish(). This method works similarly to the stop(true,true) method in that it clears the queued animation and causes the current animation to jump to its final value. However, unlike stop(true,true), it causes all queued animations to jump to their final values. The finish() method is not used much, let’s take a brief look at it.
[Recommended learning: jQuery video tutorial, web front-end development video]
The above is the detailed content of What is the use of jquery stop() method?. For more information, please follow other related articles on the PHP Chinese website!