画像表示（フェードインとスライドアップ）

Question

が、私はこれらの効果でサイクルに3枚の画像をしようとしている：

1. 1秒の遅延を最初の画像を表示する前
2. 画像＃1は、フェードインおよびスライドアップエフェクトとともに表示されます。
3. イメージ＃1が5秒間表示されてからフェードアウトします。

次の画像開始前

1秒の遅延

[処理...この時点の後に繰り返されます]。
1. 画像＃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() { 
      }); 
     }); 
    }); 
} 

私は2つの問題に実行しているよ：

1）スライドを再起動すると、それはそれはアニメーションまでスライドだ失ったとき。

2）各画像を開始する前に、1秒間の空白を追加する方法がわかりません。

ここに誰かが私を助けてくれることを願っています！申し訳ありませんが、コードが最もクリーンでない場合、これは初めての画像アニメーションでの作業です。

Answer 1

あなたのタイミングを少し遅らせてスピードアップしました。重要な点は、反復間のスタート/遅延させる位置

と

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

をリセットする

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

あります。第二の実行上の位置については

あなた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() {  \t \t \t 
 
    \t \t \t $('#pic2').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() { 
 
     \t \t $('#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>