如何在事件执行完毕后立刻停止事件

Question

我有一个鼠标移入移出显示隐藏的事件，但是鼠标如果多次滑过就会执行多次，如何在鼠标移出事件执行完毕后立刻停止事件？

$(".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');
    })
});

Answer 1

题主如果要用只执行一次的方法，用.one()就行，但是一般jQuery的动画特效一定要考虑动画队列的问题，建议在执行动画之前加上.stop()方法来停止“进入动画队列但是未完全执行完”的动画

Answer 2

$(".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的所有绑定事件
});

Answer 3

on后边加个e，你用.one()这个API它就是执行一次自动删除了。

参考

Answer 4

你是想说马上中止动画吧，用 stop()

$(this).children('.p1').stop(true, true)

Answer 5

$(".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');
})

});

Answer 6

那为什么不用$(XX).hover(function(){},funciton(){})呢？