带动画和延迟的图像顺序显示（淡入和上滑）

Question

我正在尝试使用这些效果循环三张图片：

显示第一张图片前延迟一秒
图片 #1 显示为淡入和向上滑动效果。
图片 #1 显示 5 秒，然后淡出。

[过程在这一点之后重复...]

下一张图片开始前延迟一秒。
图像 #2 以相同的淡入和向上滑动效果显示，显示 5 秒，淡出...图像 #3 重复该过程并以相同模式连续循环。

这是我到目前为止构建的： 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() {
            });
        });
    });
}

我运行有两个问题：

1) 当幻灯片重新启动时，它会失去向上滑动的动画效果。

2) 我不知道如何在开始每个图像之前添加一个空白的一秒延迟。

希望这里有人能帮助我！对不起，如果代码不是最干净的，这是我第一次使用图像动画。

Answer 1

稍微打乱了你的时间以加快速度。要点是

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

重置位置

和

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

延迟开始/重复之间。

基于您的 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>

带动画和延迟的图像顺序显示（淡入和上滑）

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

javascript

jquery

animation

slideup

fadein