SlideUp et Slidedown pour chaque élément

Question

J'ai cherché ces pages sans succès, malgré certaines réponses proches. Ce que j'aime écrire est une fonction pour 5 éléments dans un parent, qui ressemble à ceci.

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> 

Chaque élément doit glisser de haut en bas (en utilisant des transitions css, donc cibler la hauteur) avant le suivant commence. J'essaie donc de créer un curseur, combinant plusieurs fonctions. Maintenant, le retard est calculé par l'index de chaque élément, mais il fait que les transitions diffèrent en vitesse. Comment obtenir la même vitesse pour chaque élément? J'essayais .queue()/.dequeue(), mais comment puis-je combiner cela avec le setTimeout()? C'est ce que j'ai jusqu'ici.

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

    }); 
} 

En plus de cela, comment puis-je configurer un délai d'attente pour le premier élément? En ce moment, c'est le deuxième style de CSS depuis le début. Quel est le meilleur moyen d'y parvenir? Merci pour toute aide ou conseils!

Answer 1

Merci pour Hitmands me pointant dans la bonne direction, j'ai réussi à résoudre ce problème. Je suis curieux de savoir pourquoi le premier .dequeue() de la ligne 9 ne semble pas faire grand-chose.

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

});} 

probablement ce code peut être amélioré. N'hésitez pas à répondre ... J'apprends encore. Merci :)