Sharp jquery-4--Stop animation and determine whether it is in an animated state (preventing animations from adding too many queues)

1. Stop animation of the element: Stop ([Cleanqueue, Gotoend]): The first parameter indicates whether to empty the unfinished animation queue, and the second parameter represents whether the animation being executed is directly to the end state.

No parameter Stop (): Stops the current animation immediately, and then starts the next animation in the current state if there is another animation.

Example: After binding an hover event for an element, if the cursor moves in and out too quickly, causing the moved animation to move out of the cursor before it is finished, the moved animation will be placed in the queue, and the moved animation is executed when it is finished. So if the cursor moves too fast, it causes the animation to be inconsistent with the moving cursor.

If you join Stop () before moving out of the animation, you can solve the problem.

$ ("div"). Hover (function() {    $ (this). Stop (). Animate ({"Height": "300px", "width": " 300px "},$function() {    $ (this). Stop (). Animate ({" Height ":" 100px "," width ": 100px"}, (+);});

If you encounter a combo animation:

$ ("div"). Hover (function() {    $ (this). Stop (). Animate ({"Height": "300px"}, +)  //If the cursor's move-out event is triggered at this point, the animation below will be performed instead of the cursor moving out, thinking that stop () is immediately stopping the current animation from entering the next animation. 
. Animate ({"width": "300px"},+function() {    $ (this). "Stop (). Animate ({" Height ":" 100px "}, 200)
. Animate ({"width": "100px"}, +);});

At this point, you need to use the first parameter of stop, set to True, and the program will empty the animation queue that the current element has not yet executed.

$ ("div"). Hover (function() {    $ (this). Stop (true). Animate ({"Height": "300px "}, $)  //If the cursor's move-out event is triggered at this point, the current animation is stopped directly, and the animation behind it is emptied, so that the cursor moves out of the animation. . Animate ({"width": "300px"},+function() {    $ (this). Stop(  True). Animate ({"Height": "100px"}, +). Animate ({"width": "100px"}, +);});

The second parameter, Gotoend, allows the current animation to reach the state of the end point directly, usually for the latter animation to be based on the last state of the previous animation.

Stop (False, True): The current animation reaches the end state directly.

Stop (True, true): The current animation directly reaches the end state and empties the animation queue for the current object.

Note: jquery can only set the final state of an animation that is being performed, and cannot directly reach the final state of the non-performing animation.

. Animate ({"Height": "200px"}, 200)
. Animate ({"Opacity", "0.2"}, 200);

No matter how you set the Stop () value, you will not be able to change the "width" or "height" of the element at the end of this div state to 300*150 size, and transparency 0.2. Both stop can only change the animation that is currently executing.

2. Determine if the element is in an animated state:

When using the animate () method, to avoid animation accumulation that causes the animation to be inconsistent with the user's behavior, you need to determine whether the current element is performing an animation.

if (! $ (Element). Is (": Animated")) {   // determine if the element is animated  // If the current  element does not perform an animation ...}

Sharp jquery-4--stops animation and determines whether it is in an animated state (prevents excessive animation from joining the queue)