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 Я сделал появляется ДИВ (замирание):

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

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

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

Answer 2

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

заменить:

$(Popup).fadeIn(700); 

с:

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

Answer 3

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

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