Shulou(Shulou.com)06/01 Report--

This article mainly explains how to use the stop () method of jquery. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to use the stop () method of jquery.

In jquery, the stop () method is used to stop the currently running animation for the selected element, with the syntax "$(selector) .stop (stopAll,goToEnd)"; the parameters stopAll and goToEnd are optional parameters whose values are Boolean and the default value is 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 for the selected element.

Syntax:

$(selector) .stop (stopAll,goToEnd)

StopAll and goToEnd are both optional parameters, their values are Boolean, and the default value is 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 animation are stopped. GoToEnd means to jump the animation to the final state of the current animation effect.

There are four forms of the stop () method, as shown in Table 1.

The four forms of the table 1:stop () method states that stop () is equivalent to stop (false, false), only stops the current animation, and the later animation can continue to execute stop (true) equivalent to stop (true, false), stop the current animation, and stop the following animation stop (true, true) the current animation continues, only stop the following animation stop (false, true) to stop the current animation and skip to the last animation. And perform the last animation.

Generally speaking, in actual development, we only use the first parameter of the stop () method, and rarely the second parameter.

For example:

Div {width:50px; height:50px; background-color:lightskyblue } $(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 ();}))

The preview effect is shown in the following image.

In this example, we use the animate () method to define four animations. After we click the start button, if we click the stop button after a while, we will immediately stop the currently executed animation (that is, stop the current animate () method), and then skip 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 themselves to feel it.

If you want to stop all queue animation, you can do this by defining true as the first parameter of the stop () method, as shown in the following code:

$("# btn-stop") .click (function () {$("div") .stop (true);})

For example:

Div {width:50px; height:50px; background-color:lightskyblue;} $(function () {$("div") .hover (function () {$(this) .animate ({"height": "150px"}, 500) }, function () {$(this) .animate ({"height": "50px"}, 500); / / return to the original state} when removed)})

The preview effect is shown in the following image.

In this example, we use the hover () method to define the animation when the mouse pointer moves in and out. When we quickly move in or out of elements, we will find a very strange bug: elements will constantly get longer or shorter! In other words, the animation will continue to execute and will not stop at all.

This kind of "can't stop" bug is often encountered in actual development, so friends must pay special attention to it. In fact, this bug is caused by the accumulation of animation. In jQuery, if an animation is not finished, it will be added to the "animation queue". In this example, each time an element is moved in or out, an animation is generated, and if the animation is not finished, it is added to the animation queue, and the animation that is not finished will continue to be executed. until all the animations are finished.

For this bug, we just need to add the stop () method before the animation generated by moving in or out elements is executed, and we can easily solve it. The final modified code is as follows.

$("div") .hover (function () {$(this). Stop (). Animate ({"height": "150px"}, 500);}, function () {$(this). Stop (). Animate ({"height": "50px"}, 500); / / returns the original state} when removed.

For this kind of bug generated by animation accumulation, we can also use is (": animated") to judge the current animation state and solve it. The is (": animated") approach will be described in more detail later.

In fact, jQuery has another way to break the animation-- finish (). This method is similar to the stop (true,true) method in that it clears the queued animation and causes the current animation to jump to the 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, so let's take a brief look at it.

At this point, I believe you have a deeper understanding of "how to use jquery's stop () method". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.