The jquery events hover, mouseenter, and mouseleave only trigger animation once

jquery hover mouseenter mouseleave event is only triggered once animation

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})

Move the mouse to a certain div, trigger the mouseenter event and animation, move out and trigger the mouseleave event and animation, but when the div is moved back and forth, the event is triggered multiple times, and the animation is repeated several times. How can the mouseenter and mouseleave events not be triggered during the execution of the animation? That is, during the animation process, the mouse moves over the div. After that, the animation will not reappear. It will only be triggered after the animation is finished and it is crossed again.

You can use the stop method:

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

If the first parameter of stop() is true, Indicates that the current animation queue will be cleared immediately, the default is fx; if the second parameter is true, it means that the currently executing animation will be immediately set to its end state.

Judgment before executing animation:

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

If the selected Element is not in the animation state, the animation will be executed. Otherwise, ignore it

^_^ (the expression of encountering a question that has been clearly answered before)

This is called the "animation atomicity problem" by @Humphry. That is to say, if the animation action is a non-reentrant atomic process, then how to implement this feature in the code.

A very clear answer can be found here. The answer is the obvious marking method: align the element to be animated, set the mark when the animation starts, and remove it when it ends (using callback function). When there is a logo, the event that starts the animation must not be triggered.

The above is the detailed content of The jquery events hover, mouseenter, and mouseleave only trigger animation once. For more information, please follow other related articles on the PHP Chinese website!