Question

I have a script that turns an unordered list of images into a horizontal scrolling carousel, but it’s misbehaving! Here…

setInterval(function(){
    $('#scroller ul li:first').animate({
        marginLeft : '-165px'
    }, 2000, 'linear', function() {
        // OnComplete
        $(this).css('margin-left', '0').appendTo('#scroller ul');
    });
}, 2000);

Basically it slides the first <li> off to the left, then moves it to the end of the <ul>.

The problem is that it doesn’t reset the margin properly so it ends up overlaying the previously last list element. On the next round of the animation it jumps to the right but is of course immediately overlayed with the next animated + moved <li>.

The <ul> has it’s width set to allow space for one image ‘off-screen’ but the append seems to miss this space and just puts it at the end of the visibly rendered space!

Any suggestions please?

( Inspired by Snook.ca’s Simplest jQuery Slideshow )

Answer 1

It will work if you add a .stop() before setting the css value:

$(this).stop().css('margin-left', '0').appendTo('#scroller ul');

I’ve made a jsFiddle.