I have a mouse move-in and move-out show-hidden event, but if the mouse slides over multiple times, it will be executed multiple times. How can I stop the event immediately after the mouse move-out event is executed?
$(".target").on('mouseenter',function() {
$(this).children('.p1').show(function(){
$(this).addClass('animated fadeInLeft');
$(this).removeClass('animated fadeInLeft');
})
});
$(".target").on('mouseleave',function() {
$(this).children('.p1').hide(function(){
$(this).addClass('animated fadeOutLeft');
$(this).removeClass('animated fadeOutLeft');
})
});
ringa_lee
If you want to use a method that only executes once, just use .one()
. However, in general, jQuery animation special effects must consider the animation queue. It is recommended to add .stop()
before executing the animation. Method to stop animations that "enter the animation queue but are not completely executed"
$(".target").on('mouseenter',function() {
$(this).children('.p1').show(function(){
$(this).addClass('animated fadeInLeft');
$(this).removeClass('animated fadeInLeft');
})
});
$(".target").on('mouseleave',function() {
$(this).children('.p1').hide(function(){
$(this).addClass('animated fadeOutLeft');
$(this).removeClass('animated fadeOutLeft');
})
$(this).unbind(); //加一句這個(gè)取消當(dāng)前dom的所有綁定事件
});
Add an e after
on, and you can use .one()
This API will automatically delete it once.
Reference
If you want to stop the animation immediately, use stop()
$(this).children('.p1').stop(true, true)
$(".target").off('mouseenter').on('mouseenter',function() {
$(this).children('.p1').show(function(){
$(this).addClass('animated fadeInLeft');
$(this).removeClass('animated fadeInLeft');
})
});
$(".target").off('mouseenter').on('mouseleave',function() {
$(this).children('.p1').hide(function(){
$(this).addClass('animated fadeOutLeft');
$(this).removeClass('animated fadeOutLeft');
})
});