Home > Web Front-end > JS Tutorial > The jquery events hover, mouseenter, and mouseleave only trigger animation once

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

黄舟
Release: 2017-06-28 10:05:18
Original
2699 people have browsed it

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)
})
Copy after login

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);
Copy after login

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
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template