jQuery Verzögerung stoppt nach dem ersten von zwei Arbeits „Argumente (?)“

Question

Ich versuche, von Augenblick zu verzögern jeweils dann 300, dann 600, dann 900 usw.

ich will jedes Element in einer nach dem anderen gleiten getrennt um 0,3 s. Hier

ist der Code:

HTML:

<div class="first"> 

</div> 

<div class="second"> 

</div> 

<div class="third"> 

</div> 

<div class="fourth"> 

</div> 

<div class="fifth"> 
</div> 

CSS:

* { 
    margin:0; 
    padding:0; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    box-sizing:border-box; 
} 

.first, 
.second, 
.third, 
.fourth, 
.fifth { 
    width: 960px; 
    padding:10px; 
    margin: 20px auto; 
    min-height: 50px; 
    background: white; 
    box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15); 
    transform: translateX(-150%); 
    transition: 0.5s ease; 
    background:orange; 

    .trans { 
    transform: translate(0); 
    transition:0.5s ease; 
    } 

} 

jQuery:

$(document).ready(function(){ 
 
    $(".first").toggleClass("trans"); 
 
}).delay(300).queue(function(){ 
 
    $(".second").toggleClass("trans"); 
 
}).delay(600).queue(function(){ 
 
    $(".third").toggleClass("trans"); 
 
}); 

* { 
 
    margin:0; 
 
    padding:0; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 
.first, 
 
.second, 
 
.third, 
 
.fourth, 
 
.fifth { 
 
\t width: 960px; 
 
    height:50px; 
 
    padding:10px; 
 
\t margin: 20px auto; 
 
\t min-height: 50px; 
 
\t background: white; 
 
    box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15); 
 
    transform: translateX(-150%); 
 
    transition: 0.5s ease; 
 
    background:orange; 
 
} 
 

 
.trans { 
 
    transform: translate(0); 
 
    transition:0.5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<div class="first"> 
 
    
 
</div> 
 

 
<div class="second"> 
 
    
 
</div> 
 

 
<div class="third"> 
 
    
 
</div> 
 

 
<div class="fourth"> 
 
    
 
</div> 
 

 
<div class="fifth"> 
 
</div>

Ich verstehe, dass es etwas aus der Warteschlange genannt wird? Obwohl ich nicht weiß, wie man das überhaupt in den Code implementiert.

versuchte ich .dequeue() vor jedem .delay() Zugabe, aber es hat nichts getan, um die Elemente dritte, vierte und fünfte wurden noch nicht :(

Senden Hilfe zeigt, bitte!

Hier ist der Code Stift:. http://codepen.io/anon/pen/vyawXm

ich auch ein snippet hinzugefügt haben

ich habe nur in die dritte Klasse setzen jQuery, aber das zeigt nicht selbst, und auch nicht vierten und fünften, wenn sie eine sind dded.

Answer 1

Sie müssen diese Zeile hinzufügen: $ (this) .dequeue(); in jeder Warteschlangen-Callback-Funktion, nachdem Sie die Funktion toggleClass aufgerufen haben.