jQuery FadeIn loses transparency on IE

Question

Hi, I'm having a design issue using jQuery FadeIn on Internet Explorer:

I have a div which animates from the bottom to the center of the page, I needed to implement the effect that the div suddenly fades in and animates to the center of the page. I got that effect using jQuery FadeIn, but I lose the transparency of the div just on Internet Explorer (7, 8), on Firefox it works fine.

This is the CSS code I'm using to give the transparency to the div (this is a class applyed to the div)

display:none;
filter:alpha(opacity=90); 
-moz-opacity: 0.9;
opacity: 0.9;

Then, via javascript I made the div appears (fade):

$(Popup).fadeIn(700);
$(Popup).css({
    "filter": "alpha(opacity=90)",
    "-moz-opacity": "0.9",
    "opacity": "0.9" });
//popup falling
$(Popup).animate({ 
                marginTop: '+=' + (windowHeight / 2 - popupHeight / 2) + 'px'
            }, 1000 );

As you can see, I tried re-asigning the CSS properties to the div, but it doesn't works either.

Thanks in advance.

Answer 1

Your CSS properties are being assigned, but immediately overridden by the continuing action of the fadeIn, which is done asynchronously. You need to chain your animations using the callback mechanism so that they aren't competing (unless you want them to happen at the same time). In any event, you should move the CSS reassignment to the callback for the fadeIn.

$(Popup).fadeIn(700, function() {
   $(this).css({ ... });
});

Answer 2

Use the jQuery fadeTo function: http://api.jquery.com/fadeTo/

replace:

$(Popup).fadeIn(700);

with:

$(Popup).fadeTo(700,0.9);

Answer 3

You should use jQuery's fadeTo, rather than fadeIn:

$(Popup).fadeTo(700, 0.9);