Browser choking using setInterval and animating background color

I'm using the jQuery Color plugin in order to get a constantly animating background.

My code is like this:

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

This is supposed to fade from one background color to another and back again.

But both Chrome and Firefox starts using a lot of resources. In addition it takes some time b开发者_JAVA百科efore the animation starts, so I believe I'm not doing it correctly. Any suggestions?

---

Why not simply use the callbacks? You're probably stacking up on animation events:

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