This is a cool background animation with jquery.

Hear is all jquery code:

(function($) {
$.fn.animatedBG = function(options){
var height = $(this).height();
var width = $(this).width();
var parts = options.parts;
var parts_width = width/parts;
var bg_image = $(this).css("background-image");
var animationWidth = options.animationWidth;

if (animationWidth == 'auto' || animationWidth == undefined) {
animationWidth = parts_width;
}

for (i=1;i<=options.parts;i++)
{
$(this).append("

");
$(this).find(".bg_part_"+i).css("float", "left");
$(this).find(".bg_part_"+i).css("background-image", bg_image);
$(this).find(".bg_part_"+i).css("background-position", "-"+parts_width*(i-1) + "px 0");
$(this).find(".bg_part_"+i).css("width", parts_width);
$(this).find(".bg_part_"+i).css("height", height);

$(this).find(".bg_part_"+i).hover(function() {
$(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1)-animationWidth + "px 0"});
} , function() {
$(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1) + "px 0"});
});
}

};

})(jQuery);

And now I will explain you how it`s works. First you need to copy all code to new file, for example animatedBG.js and add to your page header . Now you can call this script like this:

jQuery(document).ready(function() {
	var options = {
		parts: 10,
		animationWidth: 146
	}
	$('#bg').animatedBG(options);
});

Option “parts” means in how many parts your background will be split and option “animationWidth” means how far background will go to left during the animation. In “animationWidth” you can also set to “auto” then “animationWidth” will be the same as background split white. You need to use this script on page element who have some background.

The article source:http://www.css3forum.com/all_articles/jquery_cool_background_animation/