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');
})
});
PHP中文网2017-06-14 10:56:31
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"
大家讲道理2017-06-14 10:56:31
$(".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(); //加一句这个取消当前dom的所有绑定事件
});
黄舟2017-06-14 10:56:31
Add an e after
on, and you can use .one()
This API will automatically delete it once.
Reference
漂亮男人2017-06-14 10:56:31
If you want to stop the animation immediately, use stop()
$(this).children('.p1').stop(true, true)
学习ing2017-06-14 10:56:31
$(".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');
})
});