Question

I am using jquery to slide images left inside a div set to hide overflows, and then remove the first image and append it to the end, so that I always have the same number of images in the list and they keep sliding left each time the function fires:

function xxx(){
    var first = $('.ximg:first');
    $('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));});

}
setInterval(function(){ xxx () }, 8000);

<div style="position:relative; overflow:hidden; width: 400px; height: 150px;">
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"></div>
    <div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"></div>
</div>

But I only end up with 1 image in the container, the second only gets added when the function fires. I know there are read made plugins to do this kind of thing but I want it simple and prefer to try and write my own even thought I am relatively new with jquery !

http://jsfiddle.net/rgct2/6/

The container is 400 wide and as each div is 200 wide, there should always be 2 divs in view, even during animation when it will show a % of the first and 3rd divs.

Answer 1

A better way is probably to animate the width of the first element, so it doesn’t require all elements to be animated.

function xxx() {
    var origWidth = $('.ximg:first').width();
    $('.ximg:first').animate({
        width: 0
    }, 2000, function() {$(this).insertAfter($('.ximg:last')).css({width: origWidth})});
}

There are also CSS problems with the elements. The parent element should have white-space: nowrap, so the elements are in the same line, even when they’re not visible. The children elements should have display:inline-block, so they can be in a line (i.e. inline), and have configurable widths.

Another thing to be aware of is the space between <div>s. You need to make sure there is no unintentional spaces, which include newlines.

See the updated demo: http://jsfiddle.net/rgct2/7/.