jquery - 如何在jquery中删除具有淡出和延迟功能的div的存在

Question

我有一种情况，我有一个常见的成功消息 div 出现在页面顶部。它具有如下功能：

function showSuccessMessage(messageType) {
                var messageParam = 'success-message.' + messageType;
                var successMessage = messageParam;
                // Show the success message
                $('.success-message').text(successMessage).hide().fadeIn().delay(5000).fadeOut(5000);
            };

如果用户提交成功，然后在 5 秒内，他可以再次提交，再次调用上述方法，之前的数据与消息正在淡出，完成后第二个会触发，所以看起来有点不切实际和奇怪的。

我需要停止淡化并清除 div 数据并显示最新的数据并覆盖上一条消息。

提前致谢。

Answer 1

您可以使用stop()它，如下所示：

 $('.success-message').stop(true,true).hide().text(successMessage).fadeIn().delay(5000).fadeOut(5000);

查看工作演示