jQuery를 파이어 폭스에서 작업 .animate하지만 크롬과 IE

Question

은 내가 http://jsfiddle.net/5YrF2/3/

모두에서 작업을 진행하게 노력하고 기본적인 애니메이션이없는 애니메이션 객체의 위치를 ​​파이어 폭스에서 예상대로 작동하지만, 크롬 또는 Internet Explorer에서 첫 번째 애니메이션 명령 후 화면 맨 아래로 이동합니다.

누구든지 내가 잘못한 것을 볼 수 있습니까? .block3 애니메이션 될 때까지

지금 http://jsfiddle.net/5YrF2/6/

모두에서 별도의 파이프 애니메이션의 새 버전을 만들었습니다 업데이트는 바로 10 픽셀 이동하기로하고 15 픽셀, 최대 작품을 좋아 . 대신 이상한 흔들림을합니다. 누구든지 어떤 아이디어?

Answer 1

더 아래 세트로, 절대적 위치 DIV 있습니다. Chrome & IE는이 경우 제대로 작동합니다. 두 번째 애니메이션은 밑 부분을 0으로 설정하고 (설정되지 않았기 때문에) 0으로 설정하고 10에 애니메이션을 적용합니다. "bottom"이 10 인 절대 위치 div, 상단이 없으면 컨테이너 아래쪽에서 10 픽셀을 표시합니다.

요소를 "위로 이동"하시겠습니까? 그렇다면 대신 top을 사용하십시오. (그러나 당신은 top 속성이 없기 때문에 같은 문제가 생길 것입니다.) 난 당신의 요소에 "margin-left"와 "margin-top"을 없애고 top/left/etc를 사용할 것입니다. 대신.

Answer 2

CSS의 '하단'속성을 애니메이션으로 만들려고합니다. 처음에 명시 적으로 설정되지 않은 경우 잘못 될 수 있습니다. 대신에 "최고"속성을 애니메이션을 시도하고 방향을 반대로 :

http://jsfiddle.net/5YrF2/4/

$.Deferred(function(dfr) { 
    dfr.pipe(function() { 
     return $(".block1").delay(500).fadeIn().animate({ 
      left: '+=600' 
     }, 2500, "linear").animate({ 
      left: '+=10', 
      top: '-=10' 
     }, 100, "linear").animate({ 
      left: "+=27" 
     }, 100, "linear").animate({ 
      left: '+=10', 
      top: '+=10' 
     }, 100, "linear").animate({ 
      left: "+=25" 
     }, 100, "linear").fadeOut(); 
    }).pipe(function() { 
     return $(".block1").css('left', ''); 
    }).pipe(function() { 
     return $(".block1").delay(500).fadeIn(); 
    }) 
}).resolve();