Question

I used this method to fade an error label on my page. However, if a second error is encountered, the label doesn’t resurface. Any ideas on how to use this fading technique a second time (or third, etc).

My Javascript…

function labelFade(myLabel) {
    $(myLabel).fadeOut(7000, function () {
        $(this).html("");
    });
}

function myValidator() {
    if (invalid) {
        $("#<%= myLabel.ClientID %>").html("My Error Message.");
        labelFade("#<%= myLabel.ClientID %>");
    }
}

Answer 1

Change to this:

function labelFade(myLabel) {
    $(myLabel).show().fadeOut(7000);
}

At the end of a fadeOut, the object is set to display: none so you have to show it again in order to fade it out again. You don’t need to clear the old HTML because the label is hidden until you set new HTML.

Or you could use this to fade it in, then out:

function labelFade(myLabel) {
    $(myLabel).fadeIn(1000).fadeOut(7000);
}