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

Question

我试图用这些效果循环三张图片：

1. 显示第一张图片前的一秒延迟
2. 显示图像＃1，带有淡入和上滑效果。
3. 图像＃1显示5秒钟然后淡出。

[在此之后重复过程......]

1. 下一张图片开始前的一秒延迟。
2. 图像＃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 ...

＆＃13;

＆＃13;

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();
            });
        });
    });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;