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的：

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

我知道有一种叫做出列的东西？虽然我根本不知道如何在代码中实现它。

我尝试在每个.dequeue()之前添加.delay()，但它没有做任何事情，第三，第四和第五个元素仍然没有显示：（

请发送帮助！

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

我也添加了一个片段。

我只在第三节课中放入jQuery，但是它们甚至没有显示，第四节和第五节都没有添加。

Answer 1

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

jQuery延迟在前两个＆＃34;参数（？）＆＃34;之后停止工作

1 个答案: