Question

I’m trying to get the animation to slide 1st image out then 2nd image slide in, 2nd image slide out, 3rd image slide in and so on, as the code stands each image slides out fine but fades back in rather then sliding.

var s = 0,
    t = 2000;

$(document).on('ready', slide);

function slide(){
 var speed = setInterval(slider, t);
}

function slider(){
 s++;
 var sld  = $('#slider img'),
     imgs = sld.length;
 if(s == imgs){
 s = 0;
 }

sld.animate({'marginLeft': '+=750px'}, t).fadeOut('fast').animate({'marginLeft': '-=750px'}, t).eq(s).fadeIn(t);
}

jFiddle Demo

Answer 1

We should first change a bit the structure using an unordered list (<ul>):

<div id="slider">
    <ul>
        <li><img src="http://placehold.it/750x250/75c8c8/fff&text=1"></li>
        <li><img src="http://placehold.it/750x250/b775c8/fff&text=2"></li>
        <li><img src="http://placehold.it/750x250/c8bd75/fff&text=3"></li>
        <li><img src="http://placehold.it/750x250/c87575/fff&text=4"></li>
    </ul>
</div>​

Then we should use a setTimeout() instead of a setInterval so to be sure that the next slide is launched once the animation is completed:

var s = 0,
    t = 2000,
    timer;

$(document).on('ready', slide);

function slide(){
    timer = setTimeout(slider, t);
}

function slider(){
    s++;
    var sld  = $('#slider li'),
    imgs = sld.length;
    if(s == imgs){
        s = 0;
    }
    sld.eq(s-1).animate({'left': '750px'}, t, function() {
        sld.eq(s).animate({'left': '0px'}, t, function() {
            speed = setTimeout(slider, t);
        });
    });
}

This way we slide the image right, then the next one left and finally call the `slider()´ function again with a timeout.

To make this work we need to change the css code like this:

#slider {
    height:250px;
    width:750px;
    margin:20px auto;
}

#slider ul {
    width: 100%;
    height: 100%;
    list-style: none;
    overflow: hidden;
    border: 1px solid grey;
    position: relative;
}

#slider​ ul li {
    position: absolute;
    left: 750px;
}

#slider ul li​:first-child {
    left: 0px;
}​

Here you can see a DEMO