run a function indefinitely with setInterval

[Violet_82]

Hi chaps, I am having a little problem. Given the following snippet:
html

<div id="carousel">  
</div>

css

#carousel{
    border:1px solid magenta;
    width:600px;
    height:258px;
    background: url('sprite.png') no-repeat 0 0;
    position:absolute;
    left:0;
    top:28%;
}

jquery

$(document).ready(function(){
function scroll(){
            $("#carousel").animate({
                backgroundPosition:'-600px'}, 500);
        }
    setInterval(function(){scroll()},2000);     
});

I am trying to run scroll() forever to show different areas of the sprite in the css, but the function runs only once, how is that? I thought that calling setInterval on scroll() meant that it would run forever. Any idea?
thanks

[GliderPilot]

It is running every 2 seconds, but after the first time it runs the first time you're setting the background position to -600, not subtracting -600 so the animation does nothing after the first go around. Try this instead which substracts 600 px each time:

$("#carousel").animate({backgroundPosition:'-=600px'}, 500);

[Violet_82]

Oh I see! thanks, if I want to get back to the start when the sprite ends, do I just reset the background position?
thanks

[GliderPilot]

Yup, if it's a set number of images in the rotator you can just add an if statement that when it's on the last image you animate backgroundPosition:'600px' if it's unknown you could get the overall width and divide it by 600 to get the number of slides.