Jquery animate get stuck

Question

 function slideRight() { 


      // slide to right 
      $("div").animate({ 
       left: "200px" 
      }, 2000, function() { 
       slideLeft(); 
      }); 
     } 

     function slideLeft() { 

      // slide to left 
      $("div").animate({ 
       left: "0px" 
      }, 2000, function() { 
       slideRight(); 
      }); 
     } 
     $(document).ready(function() { 
      $("#start").on("click", function() { 
       slideRight(); 
      }); 
     }); 

나는 두 부분으로 나뉘어 있으며, 앞뒤로 동시에 움직이기를 원합니다.

<div style="top:100px;"></div> 
    <div style="top:300px;"></div> 

CSS 코드는 :

 div { 
      background: yellow; 
      height: 100px; 
      position: absolute; 
      width: 100px; 
      left:0px;} 

그러나, 애니메이션 박히 및 각 슬라이드 후 훨씬 느리게된다. 하나의 사업부는 괜찮습니다. div가 많을수록 시간이 오래 걸립니다. 왜?

Answer 1

나는 당신의 함수가 각 호출마다 지연을 야기하는 끝없는 사이클을 가진 또 다른 애니메이션 함수 안에 있다고 생각한다. 대신 두 번째 함수에서 순환을 멈추고 루프와 지연을 깨고 다시 시작하는 시간 초과로 다시 시작합니다. DEMO

Answer 2

를 추가해보십시오 뭔가 같은 :

$("div").stop().dequeue().animate({ 
    ...