Question

每次光标进入元素时，我的jQuery动画会连续多次触发，因为我可以在mouseenter上运行动画。但是这会导致一些问题，因为如果用户快速重复地输入光标，即使光标已经消失，动画也会在光标离开后多次触发。这是我遇到这个问题的动画示例。

// JS

$(".nav a").mouseenter(function(){
    if ($(this).width() === '150') {
        $(this).stop().animate({
            backgroundColor: 'white',
            color: 'black',
            width: '+=20px',
        });
    };
});

$(".nav a").mouseleave(function () {
    if ($(this).width() === '170') {
        $(this).delay(300).animate({
            backgroundColor: 'transparent',
            color: 'white',
            width: '-=20px',
        });
    };
});



// HTML

 <div class="nav">
        <div class="nav bar">
            <ul class="nav nav-tabs">
                <li><a href="home.html">Home</a></li>
                <li><a href="About.html">About</a></li>
                <li><a href="Contact.html">Get in touch</a></li>
            </ul>
        </div>
</div>


//CSS

.nav{
     width: 1330px;
     padding: 0.5%;
}


.nav a{
     font-size: 20px;
     color: white;
     width: 150px;
}

我已经看到有关此问题的其他问题，并且已经建议使用stop()函数，但我究竟如何使用它来解决我的问题？

Answer 1

尝试这种方法：

$(".nav a").mouseenter(function(){
        $(this).stop( true ).animate({
            backgroundColor: 'white',
            color: 'black',
            'margin-right': '20px'
        });
});

$(".nav a").mouseleave(function () {
        $(this).stop( true ).delay(300).animate({
            backgroundColor: 'transparent',
            color: 'white',
            'margin-right': '0'
        });
});

https://jsfiddle.net/tb0hj9ty/2/

Answer 2

$(".nav a").mouseenter(function(){
    $(this).stop().animate({
        backgroundColor: 'white',
        color: 'black',
        width: '+=20px',
    });

});

$(".nav a").mouseleave(function(){
    $(this).stop().animate({
        backgroundColor: 'transparent',
        color: 'white',
        width: '-=20px',
    });
});

如果元素上有动画，则停止动画，然后在你的情况下触发动画。

另一种方法：

// Assuming that initial element width is 500

$(".nav a").mouseenter(function(){
    if ($(this).width() === '500') {
        $(this).stop().animate({
            backgroundColor: 'white',
            color: 'black',
            width: '+=20px'
        });
    }
}).mouseleave(function () {
    if ($(this).width() === '520') {
        $(this).delay(300).animate({
            backgroundColor: 'transparent',
            color: 'white',
            width: '-=20px',
        });
    }
});

Answer 3

我有个主意！你可以使用一个变量，比如animate_happened告诉jquery只有当这个变量是false时才开始新动画：

 var animation_happened = flase;
   if(animation_happened == flase){
           $(".nav a").mouseenter(function(){
        if ($(this).width() === '150') {
            animation_happened = true;
            $(this).stop().animate({
                backgroundColor: 'white',
                color: 'black',
                width: '+=20px',
            });
        };
    });
   }


$(".nav a").mouseleave(function () {
    if ($(this).width() === '170') {
        animation_happened = false;     
        $(this).delay(300).animate({
            backgroundColor: 'transparent',
            color: 'white',
            width: '-=20px',
        });
    };
});

现在只有当一个动画完成其循环时，才会出现新动画！

如何阻止jQuery动画多次触发

3 个答案: