How can I append an
tag to the end of a
in off-screen (overflow) space?

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 )

Wish I could vote this up again, thanks for drawing my attention to something so simple to implement and yes the answer is +1 too, thanks @DanielB! — clairesuzy, Jun 10 '11 at 17:44

score 1 · Accepted Answer · answered Jun 09 '11 at 11:41

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.

answered Jun 09 '11 at 11:41

DanielB

19,910
2
44
50

How can I append an tag to the end of a in off-screen (overflow) space?

1 Answers1

How can I append an
tag to the end of a
in off-screen (overflow) space?