fade-in-out-background.js

/* Fade in/out a different background image every 60 seconds

Relies on the background image itself being applied to the html tag, 
using classes bg1 through bg4 for four different background images.
*/
jQuery.fx.step.bgfadeout = function(fx) {
    fx.elem.style.backgroundColor = 'rgba(255,255,255,' + fx.now + ')';
};
jQuery.fx.step.bgfadein = function(fx) {
    fx.elem.style.backgroundColor = 'rgba(255,255,255,' + (1 - fx.now) + ')';
};
jQuery(function($) {
    var i = 1;
    setInterval(function() {
        i += 1;
        if (i > 4) {
            i = 1;
        }
        $('body').animate({bgfadeout: 1}, 800, function() {
            $('html').attr('class', 'bg' + i);
            $('body').animate({bgfadein: 1}, 800);
        });
    }, 60 * 1000);
});