Detailed jquery Stop animation--stop () method of using _jquery

Many times you need to stop the animation that the matching element is in progress, for example, when the mouse is selected into the element display menu, the mouse left to hide the Drop-down menu, if the mouse moved out too fast will cause the animation effect and the mouse action inconsistent situation , at this time stop () came in handy.

The syntax structure of the Stop () method is:

stop([clearQueue],[gotoEnd]);

Parameters Clearqueue and gotoend are optional arguments, Boolean (True or false). Clearqueue represents whether to empty an unfinished animation queue, gotoend whether to jump directly to the end of an animation that is being performed.

(1) using the Stop () method directly, the current animation is stopped immediately , and the next animation is started in the current state if the next animation waits to continue. For example, the following example:

 <!--HTML part-->
 

 /* JS part *
 /$ ("#panel"). Hover (function () {
  $ (this). Stop (). Animate ({height: "M"},);
 },function () {
  $ (this). Stop (). Animate ({height: ");
 

At this point, when the cursor moves in, the trigger cursor moves into the animation (the height changes to 150 in 0.2 seconds), the cursor moves out when the animation is not finished, stops the current animation (perhaps the height has not reached 150), and the animation that moves the cursor out of the trigger (in 0.3 seconds the height changes back to 22). Vice versa.

If you encounter a combined animation, for example:

$ ("#panel"). Hover (function () {
  $ (this). Stop ()
   . Animate ({height: 150}, 200)///If the cursor's move out event is triggered at this time
           // The following animation will be executed
   . Animate ({width: "300"},300);//instead of the cursor move out of the animation
 },function ()
  {$ (this). Stop ()
   . Animate ({ Height: "
   animate" ({width: "},300");
 

At this point, only a stop () method with no parameters appears to be powerless. Because the Stop () method only stops the animation in progress, if the animation is performing in phase 1th (changing the height), the trigger cursor moves out of the event, stopping the current animation and continuing with the following. Animate ({width: "300"},300) animation, The animation that moves the cursor out of the event will not continue until the animation is finished, which is clearly not the expected result. In this case, the first parameter of the Stop () method works.

(2)Stop (true), at which point the program will empty the current element after it has not finished executing the animation queue . So you can change the above code to such code, you can achieve the desired effect.

$ ("#panel"). Hover (function () {
  $ (this). Stop (True)
   . Animate ({height: 150}, 200)///If the cursor's move out event is triggered at this time
           // Skip the following animated queues directly
   . Animate ({width: "},300"); 
 },function () {
  $ (this). Stop ()
   . Animate ({height: "22"},
   Animate ({width: "},300");
 

(3) The 2nd parameter (gotoend) can be used to let the animation in progress directly to the end of the state, usually for the latter animation needs based on the last state of the previous animation situation, you can through the Stop (false,true) this way to Let the current animation reach the end state directly .

(4) A combination of the two Stop (true,true), that is, stop the current animation and directly to the end of the current animation state , and empty the animation queue .

(5) Note that jquery can only set the final state of the animation being executed without providing a way to get to the final state of the execution animation queue directly. For example, there is a set of animations:

  $ ("div.content")
  . Animate ({width: "the").
  Animate ({height: "$)
  . Animate ({opacity:" 0.2 "}, 200);

No matter how you set the Stop () method, you can no longer change the width or height, turn the end state of the <div> element to 300*150 size, and set the transparency to 0.2.

Warm tips:

The animations in jquery are show (), Hide (), FadeIn (), fadeout (), Slidedown (), Slideup (), animate (), and so on. The Stop () method applies to all of the above animations.

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!