jquery動畫卡住

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，我想在同一時間來回移動它們。

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

CSS代碼：

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

然而，動畫卡住，成爲每張幻燈片後慢得多。一格就可以了。越多divs，時間越久。爲什麼？

Answer 1

我認爲問題是，你的函數調用自己內部另一個動畫函數與永無止境的循環，導致每次調用延遲。相反，我正在停止第二個函數的循環，並重新啓動超時，這會中斷循環並延遲並再次啓動。 DEMO

Answer 2

嘗試添加類似：

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