jQuery的延迟停止工作后，两个率先“的参数（？）”

Question

我试图通过即时推迟每个然后300，然后600，然后900等

我想每个元素在一个接一个的分离之后滑动0.3秒。

下面是代码：

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>

我知道有一种叫做出队的东西吗？尽管我不知道如何在代码中实现这一点。

我想每个.delay()前加入.dequeue()但它没有做任何事情，要素第三，第四和第五仍然没有显示:(

发送的帮助，请！

下面是代码笔：http://codepen.io/anon/pen/vyawXm

我添加了一个片段太

我只有把jQuery的为第三类，但这并不甚至显示，而且也没有第四和第五时，他们一dded。

Answer 1

您需要添加以下行：$（this）.dequeue（）;在你调用toggleClass函数之后，在每个队列的回调函数中使用 。