Question

I have a <span> tag which I fadeIn/Out using jQuery

<span id="checkbox_err">Some text Some text Some text Some text Some text Some text </span>

This span has a background applied to it.

background-color: #EEAAAA;

I fadeOut this span using

$("span#checkbox_err").fadeOut("slow");

Now this works perfectly in Firefox, But in IE, I get a strange issue (though INCONSISTENT) i.e. on a few ocassions, the span does not fade out , even though the text inside it is hides..So I see a blank box with background color..

Strangely when I inspect the span element at that point, it says “display:none” for it.

Please let me know if this is a known issue and do you have any fix for the same (APART from the very obvious fadeOut(“fast”);)

Answer 1

Instead of using fadeOut, you should be using fadeTo.

$("span#checkbox_err").fadeTo('slow',0);

now lets update that to make sure its gone at the end of the transition

$("span#checkbox_err").fadeTo('slow',0, function() {
    $(this).hide();
});