The jquery hover event only triggers an animation once,

The jquery hover event only triggers an animation once,

Recently, I encountered an animation problem as follows:

[Javascript]View plain copy

1. $ ("Div"). hover (
2. Function (){
3. $ (This). animate ({"margin-top": "100px"}, 1000 );
4. }, Function (){
5. $ (This). animate ({"margin-top": "200px"}, 1000 );
6. });

 

The Code is a simple mouse-sliding animation, but when I tested it, I found that when I slide back and forth like a nerve, the event was triggered multiple times, the animation is repeated multiple times. How can this problem be avoided? That is, when the mouse slides over this div during the animation, this event will not be triggered?

With questions, google,

It is found that after the hover event is bound to the element, if the cursor moves in and out too quickly, resulting in the animation being moved in is not completed, the cursor is removed, the removed animation will be placed in the queue and executed after the animation is completed. Therefore, if the cursor is moved in and out too quickly, the animation effect may be inconsistent with that of the moving cursor.

There are two solutions:

 

1. You can use the stop method of jq:

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

Ifstop()The first parameter istrueTo immediately clear the current animation queue. The default value isfxIf the second parameter istrueTo immediately set the animation being executed to its end state.

Extension: (it seems I really have to take a good look at the jq api)

Stop element Animation: stop ([cleanQueue, gotoEnd]): the first parameter indicates whether to clear the animation queue that has not been completed, the second parameter indicates whether to directly jump an animation in progress to the final state. (Default ).

(1) No parameter stop (): stop the current animation immediately. If there is another animation, start the next animation in the current state.

(2) stop (false, true): The current animation is in the final state.

(3) stop (true, true): The current animation reaches the final state and clears the animation queue of the current object.

Note: jQuery can only set the final state of the animation being executed, but cannot directly reach the final state of the animation being executed.

2. Judge before executing the animation:

if (!$(obj).is(':animated')) {    // to do something}