jQuery中Toast延迟隐藏期间点击关闭按钮无效的问题求助

你的问题出在jQuery的动画队列机制上：当你执行$("#toast_success").show("slow").delay(3000).hide("slow")时，delay(3000)和hide("slow")已经被加入了元素的动画队列。点击关闭按钮时调用的hide("slow")只是在队列末尾新增了一个隐藏操作，但原队列里的延迟隐藏任务依然会在3秒后执行，导致提示框再次消失。

只需要修改点击事件的代码，在隐藏前清空动画队列并停止当前动画：

$(".toast_close").on('click', function() {
    $("#toast_success").stop(true, true).hide("slow");
});

代码说明： #

• stop(true, true)是关键：
  • 第一个参数true：清空元素的整个动画队列，彻底移除原有的延迟和隐藏任务
  • 第二个参数true：立即完成当前正在运行的动画（比如如果提示框还在执行show("slow")的动画，会直接跳到完全显示的状态）

如果想避免重复触发successMessage时导致的动画队列堆积，也可以优化显示函数：

function successMessage() {
    $("#toast_success").stop(true, true).show("slow").delay(3000).hide("slow");
}

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