jQuery 애니메이션 성능 IE

Question

jQuery 애니메이션으로 회전식 컨베이어에 간단한 애니메이션을 만들었습니다. 나는 항상 5 개의 용기를 가지고 있으며 그 중 3 개의 용기가 보인다. 새 애니메이션 효과가 추가되고 마지막 효과가 제거 될 때. Firefox와 Chrome이 정확히 내가 원하는 것을 수행합니다. Internet Explorer에서 컨테이너 위치가 "scrollLeft"로 새로 고쳐지는 순간 콘텐츠가 "깜박"하며 그 이유가 무엇인지 알 수 없습니다. 내가 더 잘 깜박이는 효과를 볼 수있는 새로운 추가 내용 붉은 색

<div id="wrapper"> 
    <div id="conti"> 
     <div id="_ID"> 
      <div class="section">0</div> 
      <div class="section">1</div> 
      <div class="section active">2</div> 
      <div class="section">3</div> 
      <div class="section">4</div> 
     </div> 
    </div> 
<button id="prev">prev</button> 
<button id="next">next</button> 

(다음 클릭의 경우에 대한)이 스크립트

var conti = $('#conti'); 
//set startposition of scrollbar (center) --> width of section 
var teaserwidth = 60; 
conti.scrollLeft(teaserwidth); 
var animating = false; 
$('#next').click(function() { 
    if(animating) return; 
    animating = true; 
    conti.animate({ 
     scrollLeft: 2*teaserwidth 
    },  { 
      complete: function() { 
       conti.find('.section:last').after('<div style="background:red;" class="section">NF</div>'); 
       conti.scrollLeft(teaserwidth); 
       conti.find('.section:first').remove(); 
       animating = false; 
      } 
     } 
    ); 
}); 

:

이

는 마크 업입니다 IE에서. JSFIDDLE

IE에서 유동적 인 애니메이션을 변경하거나 제안 하시겠습니까?

Answer 1

슬라이더를 만들 때마다 IE에서 왼쪽 여백, 다른 브라우저에서 왼쪽으로 움직이는 애니메이션 및 새 브라우저에서 CSS 변환을 사용하여 항상 수행했습니다.

잘 작동하는 것 같습니다.