jQuery FadeIn теряет прозрачность в IE

Question

У меня проблема с дизайном с использованием jQuery FadeIn в Internet Explorer:

У меня есть div, который анимирует снизу к центру страницы, мне нужно было реализовать эффект, когда div внезапно исчезает и анимируется в центре страницы. Я получил этот эффект, используя jQuery FadeIn, но я теряю прозрачность div только в Internet Explorer (7, 8), в Firefox он работает нормально.

Это код CSS, который я использую для придания прозрачности div (это класс, применяемый к div)

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

Затем с помощью javascript я сделал, что div появляется (исчезает):

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

Как видите, я пытался переназначить свойства CSS на div, но он тоже не работает.

Заранее спасибо.

Answer 1

Вы должны использовать jQuery fadeTo, а не fadeIn:

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

Answer 2

Ваши свойства CSS назначаются, но сразу же переопределяются продолжающимся действием fadeIn, которое выполняется асинхронно. Вам нужно связать анимацию с помощью механизма обратного вызова, чтобы она не конкурировала (если только вы не хотите, чтобы это происходило одновременно) В любом случае вам следует переместить переназначение CSS в функцию обратного вызова для fadeIn.

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

Answer 3

Используйте функцию jQuery fadeTo: http://api.jquery.com/fadeTo/

заменить:

$(Popup).fadeIn(700);

с:

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