jquery fadeOut() 同一个元素多次

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);

Answer 2

there is a callback function you can add as a parameter to fadeOut. It will be called once the animation is completed. Check out the docs, here: fadeOut Docs

So, try this:

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

Answer 3

You just need to show the elements once you change the html:

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

but, I think that delay has the effect that you are looking for:

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

Answer 4

If you are dealing with iframe, Can you try the below code? It should solve your problem.

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