SlideUp und Slidedown für jedes Element

Question

Ich habe diese Seiten nach einer Antwort ohne Glück gesucht, obwohl einige Antworten nahe kamen. Was ich schreiben möchte, ist eine Funktion für 5 Elemente in einem Elternteil, die ungefähr so ​​aussieht.

HTML

<div id="introOverlay"> 
    <div id="introSlider-0"></div>  
    <div id="introSlider-1"></div>  
    <div id="introSlider-2"></div>  
    <div id="introSlider-3"></div>  
    <div id="introSlider-4"></div> 
</div> 

Jedes Element sollte nach oben und unten (mit CSS-Übergänge, also die Höhe Targeting) gleiten, bevor der nächste beginnt. Also versuche ich einen Slider zu erstellen, der mehrere Funktionen kombiniert. Jetzt wird die Verzögerung durch den Index jedes Elements berechnet, aber die Übergänge unterscheiden sich in der Geschwindigkeit. Wie bekomme ich für jedes Element dieselbe Geschwindigkeit? Ich habe versucht .queue()/.dequeue(), aber wie kombiniere ich dies mit der setTimeout()? Das ist, was ich bis jetzt erreicht habe.

jQuery

function introSlides() { 

    $('#introOverlay div[id^=introSlider]').each(function(i){    

    var slides = $(this); 

     // Slide Down 
     setTimeout(function() { 
      slides.css({'height' : 600}); 
     }, 3000 * i); 

     // Slide Up 
     setTimeout(function(){ 
      slides.css({'height' : 0}); 
     }, 4000 * i);      

    }); 
} 

Hinzu kommt, dass, wie kann ich ein Timeout für das erste Element gesetzt? Gerade jetzt bekommt es das zweite CSS-Styling von Anfang an. Was ist der beste Weg, dies zu erreichen? Danke für jede Hilfe oder Tipps!

Answer 1

Danke für Hitmands, die mich in die richtige Richtung weisen, habe ich geschafft, dies auszuarbeiten. Ich bin neugierig, warum die erste .dequeue() in Zeile 9 nicht viel zu tun scheint.

Script

function introSlides() {     
$('#introOverlay div[id^=introSlider]').each(function(i){   

var slides = $(this);      

// Slide Down 
setTimeout(function() { 
    slides.css({'height' : 600}).delay(3000).queue(function(){ 
     $(this).css({'height' : 0}).dequeue(); 
    }); 
}, 4000 * i);    

$(this).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 

function(e){ 
// slide Up again 
$(this).css({ 'height' : 0 }).dequeue(); 
});    

});} 

Wahrscheinlich kann dieser Code verbessert werden. Bitte zögern Sie nicht zu antworten ... Ich lerne immer noch. Danke :)