jQuery函數循環改變背景圖像崩潰firefox

Question

我想要一個背景圖像淡出。

我有兩個div互相頂部與背景設置爲圖像。

在我的jQuery我瞄準一個div然後把不透明度爲零顯示另一個。然後我做相反的事。然而，這是工作，但現在由於某種原因，這個無限循環崩潰的Firefox。

我該怎麼做才能使它不會崩潰？

   $(document).ready(function() { 
       function change(){ 
        $('#back1').animate({opacity:0}, {duration:3000}); 
        $('#back1').delay(1000); 
        $('#back1').animate({opacity:1}, {duration:3000}); 
        $('#back1').delay(1000); 
        change(); 

       } 

       change(); 

      }); 

Answer 1

你將不得不使用該函數的回調

Answer 2

問題是您在動畫完成之前調用change()，因此您正在創建競爭條件。動畫是異步的。動畫有一個完整的回調，你可以使用。

試試這個：

function change(){ 
    $('#back1').animate({opacity:0}, {duration:3000}) 
       .delay(1000) 
       .animate({opacity:1}, {duration:3000}, function(){ 
         /* use complete callback of final animation to start sequeunce again*/ 
         change(); 
       });     

}