jQuery fadeOut("slow") issue on IE

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

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

There is no need to change the HTML and jQuery. Just add the following in the css of span and it works in IE 7,8,9

background-color: #EEAAAA;display:block;

See the result is here: http://jsfiddle.net/prsQd/

jQuery fadeOut() command actually applies the "disaply:none" css style on an element, and fadeIn() command applies the "display:block" css style.