Question

I want to loop an animation which is essentially changing the background-position ever 150 milliseconds. It does not fade or anything, it just has to happen over and over again. But I can not seem to find a solution that loops these set of instructions.

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -47px');
    }, 150 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -94px');
    }, 250 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -141px');
    }, 350 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -188px');
    }, 450 );

setTimeout( function() {
        $('div.arrow').css('backgroundPosition', '0 -235px');
    }, 550 );

Answer 1

Use setInterval instead of setTimeout.

Also use a global variable to see where the background image is, rather than setting lots of timeouts…

So you’ll end up with something like this:

var currPos = 0;
setInterval(function(){
    currPos = currPos-47;
    if(currPos < -235){
        currPos = 0;
    }
    $('div.arrow').css('backgroundPosition','0 '+currPos+'px');
}, 150);

See example here: http://jsfiddle.net/aUBNw/