javascript - jQuery 延迟在前两个 "arguments(?)"后停止工作

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

我也添加了一个片段。

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

Answer 1

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