Re-displaying after fadeOut

Question

Please can I affirm that I am doing this correctly:

I have a message that I wish to fadeOut after it has been displayed.

The jQuery fadeOut sets display: none once the opacity is zero.

Thus when I want to display that same message again by setting visibility: visible the message won't display because display: none is still set.

So this is what I did:

        $("#message6").fadeOut(600, function(){
            $("#message6").css("display","");
            $("#message6").css("visibility","hidden");              
        });

This works just fine. It doesn't seem very elegant.

Am I missing something here? Is there a neat way of doing this?

Answer 1

Why don't you do:

$("#message6").fadeOut(600);

And to show your message again:

$("#message6").show();

Answer 2

Why not something like this

$(document).ready(function() {
        $('#myLabel').fadeOut(1000, function() {
            $(this).html(""); //reset the label after fadeout
        });
    });​

Sample