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 {
	width: 960px;
  height:50px;
  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;
}

<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

我也添加了一个 sn-p。

我只为第三个类添加了 jQuery，但它甚至没有显示，第四个和第五个添加时也没有。

Answer 1

你需要添加这一行：$(this).dequeue(); 在每个队列回调函数中，在你调用 toggleClass 函数之后。