jQuery Background Position Reference

Just animate the background position as you would any other attribute. The name can be either backgroundPosition or 'background-position'.

$(selector).animate({backgroundPosition: '-100px 0px'});
$(selector).animate({'background-position': '-100px 0px'});

Specify the horizontal and (optionally) vertical offsets for the background. These may be absolute values (e.g. -100px or 50px), percentages (e.g. -25% or 50%), relative values (e.g. -=200px or +=20%), or named positions (e.g. right or bottom). If the vertical offset is omitted it defaults to '50%'.

$(selector).animate({backgroundPosition: '-100px 0px'});
$(selector).animate({backgroundPosition: '50% -25%'});
$(selector).animate({backgroundPosition: '+=200px -=100px'});
$(selector).animate({backgroundPosition: 'right top'});
$(selector).animate({backgroundPosition: 'bottom'});

For the best results do not mix units when animating the background, i.e. always use pixels or percentages. Named positions are converted to percentages before use. If no units are specified 'px' is assumed.

As for any other animation, you can specify the speed, easing, and a callback function.

$(selector).animate({backgroundPosition: '-100px 0px'},
	2000, 'easeOutBounce', function() {...});