如何修复JQuery中show().fadeOut()动画重叠及重置异常问题？

你当前的代码里，.stop()默认只会终止当前正在运行的动画，不会清空后续的延迟队列（.delay()属于队列操作），所以快速反复触发鼠标事件时，之前的延迟和fadeOut还会继续执行，导致动画混乱。

要实现立即终止所有前序动画并重置状态，需要调整.stop()的参数，同时确保元素状态正确：

修改后的代码 #

<script>
$(document).on('mouseenter','#a', function(e){
    console.log('in');
    msg('In');
});
$(document).on('mouseleave','#a', function(e){
    console.log('out');
    msg('Out');
});

function msg(str, delayMs=1500, speed='slow'){
    const $msg = $("#msg");
    $msg.html(str)
        // 清空所有动画队列，立即完成当前动画并跳转到最终状态
        .stop(true, true)
        .show() // 强制显示元素，确保新动画起始状态正确
        .delay(delayMs)
        .fadeOut(speed);
}
</script>
<center>
<div id="a">EVENT</div>
<div id="msg"></div>
</center>

关键说明 #

• .stop(true, true)：第一个true表示清空整个动画队列，第二个true表示让当前动画立即完成并跳转到最终状态，彻底终止所有未执行的前序动画。
• 先调用.show()是为了避免元素因之前的fadeOut动画处于半透明或隐藏状态，保证新动画从完全可见的状态开始执行。

内容的提问来源于stack exchange，提问作者user20417316