jQuery Background Position Reference

A jQuery plugin that allows the position of a background image to be animated. If you find this plugin useful please vote for it on the jQuery site.

This page provides a documentation reference for working with the plugin v1.0.1. See a demonstration of the bookmark plugin and download the code from there.

Usage

Usage

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() {...});