search

Home  >  Q&A  >  body text

javascript - How to stop an event immediately after it has finished executing

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_leeringa_lee2795 days ago901

reply all(5)I'll reply

  • PHP中文网

    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"

    reply
    0
  • 大家讲道理

    大家讲道理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的所有绑定事件
    });

    reply
    0
  • 黄舟

    黄舟2017-06-14 10:56:31

    Add an e after

    on, and you can use .one()This API will automatically delete it once.

    Reference

    reply
    0
  • 漂亮男人

    漂亮男人2017-06-14 10:56:31

    If you want to stop the animation immediately, use stop()

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

    reply
    0
  • 学习ing

    学习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');
    })

    });

    reply
    0
  • Cancelreply