首页 >社区问答列表 >javascript - 如何在事件执行完毕后立刻停止事件

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

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

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

  • 小皮
  • 小皮    2017-06-14 10:56:315楼

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

    +0添加回复

  • 回复
  • 大家讲道理
  • 大家讲道理    2017-06-14 10:56:314楼

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

    +0添加回复

  • 回复
  • 学习ing
  • 学习ing    2017-06-14 10:56:311楼

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

    });

    +0添加回复

  • 回复