jQuery: Easiest way to animate background image sliding left?

Question

What's the best way to animate a background image sliding to the left, and looping it? Say I've got a progress bar with a background I want to animate when it's active (like in Gnome or OS X).

I've been playing with the $(...).animate() function and trying to to modify the relevant CSS property, but I keep hitting a brick wall when trying to figure out how to modify the background-position property. I can't just increment its value, and I'm not sure if this is even the best approach.

Any help appreciated!

Answer 1

As soon as I posted this I figured it out. In case it helps anyone else, here's the function I came up with:

function animateBar(self) {
 // Setup
 var bar = self.element.find('.ui-progress-bar');

 bar.css('background-position', '0px 0px');

 bar.animate({
  backgroundPosition: '-20px 0px'
 }, 1000, 'linear', function() {
  animateBar(self);
 });
}

Answer 2

this is great!, thanks for your help, i made a minor tweaks but the script is still working.

=)

thanks!