jquery fadeOut（）多次使用相同的元素

Question

我有以下代码，当事情发生时通知用户：

window.parent.$(".Toast").html('Successfully Did Something!').fadeOut(9000);

第一次它很棒，但是当然，元素仍然设置为隐藏并具有相同的文本。因此，当用户再次触发它时，没有任何反应。我已经尝试立即将html（）设置为空并显示它，但这会立即发生，所以你永远不会看到文本。我想我可以在打开编辑对话框时将其“重置”，但我确信有人可以通过一种简单的方法解决这个问题。

Answer 1

在.show()之前使用.fadeOut()：

window.parent.$(".Toast").html('Successfully Did Something!').show().fadeOut(9000);

要取消当前动画，请使用.stop(true, true)：

window.parent.$(".Toast").html('Successfully Did Something!').stop(true, true).show().fadeOut(9000);

Answer 2

有一个回调函数可以作为参数添加到fadeOut。一旦动画完成，它将被调用。在这里查看文档：{​​{3}}

所以，试试这个：

window.parent.$(".Toast").html('Successfully Did Something!').fadeOut(9000, function(){
    window.parent.$(".Toast").html('')
});

Answer 3

更改html后，您只需要显示元素：

window.parent.$(".Toast").html('Successfully Did Something!').show().fadeOut(9000);

但是，我认为延迟会产生你正在寻找的效果：

window.parent.$(".Toast").html('Successfully Did Something!').fadeIn().delay(9000).fadeOut();

Answer 4

如果您正在处理iframe，可以尝试以下代码吗？它应该解决你的问题。

window.top.$(".Toast").html('Successfully Did Something!').fadeOut(9000, function(){
    $(this).html('').css("opacity", 1).hide();
});