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