Bildanzeige in Folge mit Animation und Verzögerung (Fade-in und Slide-Up)

Question

ich zu Zyklus versuchen, drei Bilder mit diesen Effekten:

1. Eine zweite Verzögerung vor dem ersten Bild zeigt
2. Bild # 1 wird mit einem Ein- und Ausblendeffekt angezeigt.
3. Bild # 1 wird 5 Sekunden lang angezeigt und dann ausgeblendet.

[Vorgang wiederholt sich nach diesem Punkt ...]

4. Eine Sekunde Verzögerung vor dem nächsten Bild beginnt.
5. Bild # 2 wird mit dem gleichen Ein- und Ausblendungseffekt angezeigt, der 5 Sekunden lang angezeigt wird, ausgeblendet wird ... und der Vorgang wird für Bild # 3 wiederholt und wiederholt sich im gleichen Muster.

Das ist, was ich bisher gebaut haben: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() { 
      }); 
     }); 
    }); 
} 

Ich laufe in zwei Ausgaben:

1), wenn der Schlitten neu gestartet wird, es verliert es Folie nach oben Animation.

2) Ich weiß nicht, wie eine leere Sekunde Verzögerung vor dem Start jedes Bildes hinzugefügt wird.

Ich hoffe, dass jemand hier mir helfen kann! Sorry, wenn der Code nicht der sauberste ist, arbeite ich zum ersten Mal mit Bildanimationen.

Answer 1

Vermischte sich mit Ihren Zeiten etwas, um es zu beschleunigen. Wichtige Punkte sind

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

Positionen zurückgesetzt

und

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

Start zu verzögern/zwischen den Wiederholungen.

Basierend auf Ihren 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>