javascript - Bagaimana untuk menghentikan acara serta-merta selepas ia selesai dilaksanakan

Question

Saya mempunyai acara yang memaparkan dan menyembunyikan apabila tetikus digerakkan masuk dan keluar Walau bagaimanapun, jika tetikus meluncur beberapa kali, ia akan dilaksanakan beberapa kali.

$(".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

Jika anda ingin menggunakan kaedah yang hanya dilaksanakan sekali, gunakan kaedah .one()就行，但是一般jQuery的动画特效一定要考虑动画队列的问题，建议在执行动画之前加上.stop() untuk menghentikan animasi yang "masuk baris gilir animasi tetapi tidak dilaksanakan sepenuhnya"

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

Tambahkan e selepas

on, dan jika anda menggunakan .one()API ini, ia akan memadamkannya secara automatik sekali.

Rujukan

Answer 4

Jika anda ingin menghentikan animasi serta-merta, gunakan 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');
})

});