Image display in sequence with animation and delay (fade-in and slide-up)

Question

I'm trying to cycle three images with these effects:

1. One second delay before showing first image
2. Image #1 is displayed with a fade-in and slide up effect.
3. Image #1 is shown for 5 seconds and then fades out.

[process repeats after this point...]

4. One second delay before next image starts.
5. Image #2 is displayed with the same fade-in and slide up effect, shown for 5 seconds, fades out... and the process is repeated for Image #3 and loops continuously in same pattern.

This is what I have built so far: http://jsfiddle.net/27uy8/226/ runslide();

function runslide() {
 $('#pic1').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {                  
    $('#pic2').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
            $('#pic3').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
            });
        });
    });
}

I'm running into two issues:

1) when the slide restarts, it looses it's slide up animation.

2) I don't know how to add a blank one second delay before starting each image.

I hope someone here can help me! Sorry if the code is not the cleanest, this is my first time working with image animations.

Answer 1

Messed with your timings slightly to speed it up. Important points are

 $('#pic1,#pic2,#pic3').css({top: 0})

to reset positions

and

 $('#pic1').delay(3500).fadeIn({queue: true, ....

to delay start / between repeats.

Based on your JSFiddle...

runslide();

function runslide() {
  $('#pic1,#pic2,#pic3').css({top: 0})
  $('#pic1').delay(3500).fadeIn({queue: true, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {       			
 			$('#pic2').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
       		$('#pic3').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
            runslide();
            });
        });
    });
}

#pics div {
  position: absolute;
  display: none;
}
#pics {
  position: absolute;
  top: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pics">
  <div id="pic1">
    <img src="http://www.sbwebsitesolutions.com/wp-content/uploads/2014/02/step1blue-300x300.png">
  </div>
  <div id="pic2">
    <img src="http://www.sbwebsitesolutions.com/wp-content/uploads/2014/02/step2blue-300x300.png">
  </div>
  <div id="pic3">
    <img src="http://www.sbwebsitesolutions.com/wp-content/uploads/2014/02/step3blue-300x300.png">
  </div>
</div>