使用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();
          }
     });
 }