Opacity in IE/jQuery // solved ugly

Inelegant solution, ok in FF, Chrome and IE: put the opacity css inline, directly on the div.

Original post:

I have a problem with IE8 rendering opacity: it's an overlay set to 50% opacity, code below.

The css renders correctly when it's simply set to appear when loaded.

However, if the overlay is set to 'display:none' and then faded-in, it renders correctly, then immediately jumps to full opacity.

This behavior is consistent, local testing in IE8, across compatibility mode on/off, and compat. mode with overriding meta tag.

Any ideas? I've checked previous questions. FFox and Chrome do the fadeIn ok.

css

display:none;

-moz-opacity:0.50; filter:alpha(opacity=50); opacity:0.50;

jQuery:

function showtitle() {

$('#ttl').delay(4200).fadeIn(2000);

}

override compatibility mode

Topic Participants