CODEWITHSUNDEEP
jquerycssinternet-explorer-8opacity
Turnip
Turnip

Reputation: 36642

Dynamically set opacity woes - IE8 only

I'm having some issues setting the opacity of certain elements with jquery in IE8 and can't for the life of me figure it out.

See this example: Jsfiddle

<div class="container">

<div id="output" class="output">
    <p>Output is: <span></span></p>
</div>

<div id="output2" class="output">
    <p>Output is: <span></span></p>
</div>

<span id="output3" class="output">
    <p>Output is: <span></span></p>
</span>

</div>​

.container {
    height: 2000px;
    width: 400px;
}

.output {
    position: fixed;
    top: 100px;
    left: 30px;
    color: white;
    font-size: 16px;
    z-index: 9999;
    background: red;
    padding: 10px;
}

#output2 {
    top: 150px;
}

#output3 {
    top: 200px;
}

$(window).scroll(function() {


if($(window).scrollTop() >= 0)
   {     
       var theValue = (1-($(window).scrollTop()-0)/1000);
       $("#output p span").css('opacity', theValue);
       $("#output2 p").css('opacity', theValue);
       $("#output3").css('opacity', theValue);
       $("#output p span").html(theValue); // DEBUG OUTPUT
       $("#output2 p span").html(theValue); // DEBUG OUTPUT
       $("#output3 p span").html(theValue); // DEBUG OUTPUT

}
});​

In example one the inner <span> will not fade.

Example two shows that fading the container element works correctly.

I assumed that it may be an issue with inline elements but example three shows this to not be the case.

All three examples work correctly in IE7 and IE9 but not IE8.

Can anyone explain this? I'm running out of hair to pull out!

Upvotes: 0

Views: 932

Answers (2)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

EDITED:

Got your problem,

the span is not a block element. So opacity is not applying on it. Make it a block or inline-blcok element.

By minimizing your code like this:

$(window).scroll(function() {
    if($(window).scrollTop() >= 0) {     
        var theValue = (1-($(window).scrollTop()-0)/1000);
        $("#output p span, #output2 p, #output3").css("opacity", theValue);       
        $("#output p span, #output2 p span, #output3 p span").html(theValue); // DEBUG OUTPUT
    }
});

and by adding following CSS:

.output p span { display:inline-block }

It is working perfectly. SEE DEMO

Upvotes: 1

jennas
jennas

Reputation: 2464

IE dosnt use opacity, it uses filter. See here for more http://www.quirksmode.org/css/opacity.html

Some of the jquery animations handle this automatically. For instance:

Try

 $("#output p span").fadeTo(1, theValue);
 $("#output2 p").fadeTo(1, theValue);
 $("#output3").fadeTo(1, theValue);

Upvotes: 0

Related Questions