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

<div id="carousel">  


    border:1px solid magenta;
    background: url('sprite.png') no-repeat 0 0;


function scroll(){
                backgroundPosition:'-600px'}, 500);

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?

Recommended Answers

All 3 Replies

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);

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.