2010-02-25 3 views
1

나는 인터넷 익스플로러에 jQuery를 FadeIn를 사용하여 설계 문제에 봉착에 투명성을 잃게 :jQuery를 FadeIn은 IE

I 페이지의 중앙 하단에서 애니메이션 사업부, 나는 효과를 구현하는 데 필요한 한을가 div가 갑자기 페이드 인하 고 페이지 중심으로 움직입니다. jQuery FadeIn을 사용하여 그 효과를 얻었지만 Internet Explorer (7, 8)에서 div의 투명도를 잃었습니다. Firefox에서는 정상적으로 작동합니다.

내가 사업부가 (페이드)가 나타납니다 만든 자바 스크립트를 통해 내가 사업부의 투명성

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

그리고 (이 사업부에 applyed 클래스이다)를 제공하기 위해 사용하고 CSS 코드입니다 :

$(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에 다시 지정하려고 시도했지만 작동하지 않습니다.

미리 감사드립니다.

답변

2

CSS 속성이 할당되지만 비동기 적으로 수행되는 fadeIn의 계속 작업에 의해 즉시 무시됩니다. 콜백 메커니즘을 사용하여 애니메이션을 연결해야 경쟁하지 않도록 할 수 있습니다 (동시에 발생시키지 않으려는 경우). 어쨌든 CSS 재 할당을 fadeIn의 콜백으로 옮겨야합니다. 대체 http://api.jquery.com/fadeTo/

:와

$(Popup).fadeIn(700); 

을 :

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

당신이 옳았습니다! 나는 비동기 호출을 고려하지 않았다. 매력처럼 일했습니다. 감사. – lidermin

1

JQuery와 fadeTo 기능을 사용

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

당신은 jQuery의 fadeTo보다는 fadeIn 사용해야합니다

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

매력처럼 일했습니다. – stung