Firefox 및 Chrome/IE에서 jQuery animate()가 다른 경우

Question

현재 다른 브라우저에서 웹 페이지를 테스트하고 있는데 호환성 문제가 있습니다. 크롬에 jQuery animate() (SRWare Iron 사용) 및 IE와 관련된 문제가 있습니다.

나는 다음과 같은 코드를 사용하고 있습니다 :

jQuery를

$('.element').animate({top:"50px"}, 1400); 

HTML을

<h1 class="element">testing text slide</h1> 

CSS

body { 
    overflow: hidden; 
} 
h1 { 
    margin: 0; 
} 
    .element { 
    position: absolute; 
    bottom: -1000px; 
    left: 50px; 
    font: bold 72px Arial, sans-serif; 
} 

파이어 폭스 (오로라)에서 element은 화면 하단 (-1000 픽셀)에서 상단 앵커 50 픽셀까지 슬라이드합니다.

Chrome 및 IE에서 일어나는 현상은 element이 상단의 0 픽셀에서 상단에서 50 픽셀로 슬라이딩하기 때문에 매우 짧습니다. element에 대한 jQuery 애니메이션을 제거하면 -1000 픽셀로 배치됩니다 (생각해 보니 화면에서 벗어난 것 같습니다).

누구에게 아이디어가 있습니까? FF/IE/Chrome에서 제대로 작동하는 다른 요소가 있습니다.

Answer 1

top 또는 bottom 중 하나만 일관되게 조작해야합니다. 현재 CSS는 bottom으로 설정하고 애니메이션은 top으로 변경됩니다. 두 개는 분명히 독립적이지 않으므로 하나만 설정하고 조작하면 일관성을 유지할 가능성이 훨씬 커집니다. top에 대한 값을 설정하지 않으면 자바 스크립트 애니메이션의 애니메이션이 시작될 때 일치하지 않는 시작 값인 top이 표시됩니다. 일부 브라우저에서는 auto으로 돌아오고 다른 브라우저에서는 숫자 값으로 되돌아갑니다. 설정하지 않은 값에 의존하지 않으면 전체 불일치를 우회 할 수 있습니다.

CSS가 bottom으로 설정되었으므로 bottom도 아니고 top이 아니라면 애니메이션으로 설정하는 것이 좋습니다.