jQuery fadeIn and fadeOut not working in Internet Explorer 6, 7 or 8?

Question

Hi Im using jQuery fade in/out on divs which contain images and text. It works fine in Firefox, Chrome and Safari however the effect doesn't appear to work at all in any Internet Explorer. The image disappears on fadeout the number of milliseconds I specified, but it doesn't fade.

Are there any special rules for using this in Explorer?

Answer 1

Does the element you are fading in and out have it's background color property set?

Answer 2

I think more information is needed about the nature of the element itself, but my off-the-cuff guess is that something is wrong with your background-image (assuming you have one).

Post some code (CSS, HTML and JS), so we can really get to the bottom of this.

Answer 3

I have the following HTML DIV which does not work using FadeIn/FadeOut in IE:

        <div class="tip"  style="width: 220px; display: none;">
            <div class="tip-header">
                <span><b>Title</b></span>
                <div class="right close"><a href="javascript:void(0);">close</a> <img alt=""  src="/Images/close-normal.png"/></div>
            </div>

            <div class="tip-content">EBody comes here.</div>
        </div> 


.tip
{
    display: block; 
    z-index: 99999; 
    position: fixed; 
    background-color: #ffffff; 
    -moz-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.6); 
    border:solid 1px #82C2FA;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
}

.tip-header
{
    padding: 8px; 
    min-height: 10px; 
    -moz-border-radius-topleft: 8px; 
    -moz-border-radius-topright: 8px;
    -webkit-border-radius-topright: 8px;
    -webkit-border-radius-topleft: 8px; 
     background-color: #CFE6FD; 
     border-bottom: 1px solid #82C2FA;  
}

.tip-header span
{
    font-size: 14px;
    color: #666666;
}

.tip-content
{
    padding: 8px; 
    text-align: left;
    font-size: 12px;
}

.close, .whats-this
{
    cursor: pointer;
}

.close a
{
    color: #085FBC; 
    text-decoration: none;
}

.close img
{
    vertical-align: bottom;
}

Answer 4

Yes, it is the ".tip" main div.

$(".tip").fadeIn("slow");

but this works in IE (weird):

$(".tip").show();