Question

I have the following code which notifies the user when something happens:

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

It works great the first time, but then, of course, the element is still set to hidden and has the same text. So when the user triggers it again, nothing happens. I’ve tried immediately setting the html() to empty and showing it, but that happens immediately, so you never see the text. I suppose I could make it “reset” when they open the edit dialog, but I’m sure someone has a simple way around this.

Answer 1

Use .show() just before .fadeOut():

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

To cancel the current animation, use .stop(true, true):

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