jQuery的延遲停止工作後，兩個率先「的參數（？）」

我試圖通過即時推遲每個然後300，然後600，然後900等jQuery的延遲停止工作後，兩個率先「的參數（？）」

我想每個元素在一個接一個的分離之後滑動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。

來源

2016-12-11 Joe

你是否試圖實現這樣的http://codepen.io/anon/pen/MbBMWK – Deep

哦，你沒有使用dequeue嗎？所以它不必被使用，嗯。是的，那正是我想要做的！雖然時機關閉了，但我意識到300延遲derp，我對運行腳本的誤解，每一個都是在被調用之後300毫秒，而我正在考慮它，因爲每個延遲都在加載時註冊，無法解釋但是，非常感謝！ :) – Joe

您需要添加以下行：$（this）.dequeue（）;在你調用toggleClass函數之後，在每個隊列的回調函數中使用。

來源

2016-12-11 10:20:19 user6001402

神聖的母親..非常感謝你，工作的魅力！我現在很開心 – Joe

jQuery的延遲停止工作後，兩個率先「的參數（？）」

回答

相關問題