Javascript – Easiest way to animate background image sliding left

cssjavascriptjqueryjquery-animate

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 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!

Best Solution

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);
    });
}
Related Question