Run jQuery animation continuously throughout entire website

Question

I'm running an infinite loop of a color changing background on my website using the jQuery timers plugin (plugins.jquery.com/project/timers):

jQuery(document).ready(function($) {
    $('body').everyTime(1,function() {
        $(this).animate({ backgroundColor: "#000000" }, 20000).animate({ backgroundColor: "#ffffff" }, 20000);
    });
});

Now, if you're in "home", and you click a link, it takes you to the appropriate page and it restarts the animation. The thing is, I'd like the animation not to restart and to be continuous throughout the whole site.

Is there any way to do it?

Can you run a script that doesn't stop and restart every time you go to a differente page, as long as you stay in the same domain?

Answer 1

You could probably do an AJAX post in your animation loop to a script that saves the current animation status into a session variable for the user. Upon a page load, start the animation from the point indicated in the session variable.

Answer 2

Can you run a script that doesn't stop and restart every time you go to a differente page, as long as you stay in the same domain?

No.

Is there any way to do it?

I suppose you could keep track of the current color in a cookie. When the animation restarts, check the cookie first. I'm not a fan of the idea personally but it would work.

If you want it to be completely seamless - you'll need to load every new page of content with AJAX a la Facebook, but that's an awful lot of work to serve an animated background.