瀏覽器使用setInterval和動畫背景顏色窒息

Question

我使用jQuery Color插件爲了獲得不斷的動畫背景。

我的代碼是這樣的：

$(document).ready(function() 
      var $body = $('body'); 
      function initAnimation() { 
       setInterval(colorAnimation, 12000); 
      } 
      function colorAnimation() { 
       $body 
       .animate({                                 
        backgroundColor: '#C5E8E8' 
       }, 6000) 
       .animate({ 
        backgroundColor: '#E8C5C5' 
       }, 6000); 
      } 
}); 

這應該淡出從一個背景顏色到另一個，然後再返回。

但Chrome和Firefox都開始使用大量資源。另外在動畫開始之前需要一些時間，所以我相信我沒有正確地做。有什麼建議麼？

Answer 1

爲什麼不簡單地使用回調？你可能在動畫事件上堆積如山：

function animateBackground() 
{ 
    $('body').animate({ 
      backgroundColor: '#C5E8E8' 
    }, 6000, 'linear', function() 
    { 
      $(this).animate({ 
       backgroundColor: '#E8C5C5' 
      }, 6000, 'linear', function() 
      { 
       animateBackground(); 
      } 
    }); 
}