jquery動畫之間排隊功能

Question

嗨我想創建一個分層的圖像效果，但我有問題排隊與jQuery動畫一起的功能。

基本上我需要隱藏所有的.bar divs，然後執行函數，之後會使它們淡入淡出。我需要這樣做，因爲會有多個圖像，而這種效果將是創建它們之間轉換的原因。

<div class="container"> 
<div class="image"> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
</div> 

和CSS是這樣

.container {width:700px;height:400px;margin:0 auto;background:#FF0;} 
.image {background:green; width:700px; height:300px; } 
.bar { height:300px; width:50px; background:orange; float:left;} 

和JavaScript/jQuery是這樣

$(function(){ 

var i = -1; 

function fading(){ 
    function fader(){ 
    setTimeout(function() {   
      i++;      
      if (i < 15) {   
      $('.bar:eq(' + i + ')').fadeIn('200'); 
      fader();   
      }      
     }, 100) 
    } 
    fader() 
} 

$('input').click(function(){ 

    $('.bar').hide().queue(function(){ 
        fading() 
        $('this').dequeue(); 
        }); 
}); 


}); 

如果任何人有關於如何可以做到這一點的想法不同的方式或以我沉迷於此的方式實現，這將是偉大的

Answer 1

您不能以這種方式使用動畫隊列，因爲您的.queue調用與所有fadeIn()調用混在一起，並且不會等到這些調用之後，因爲它們也使用動畫隊列。你可以創建一個單獨的隊列並使用它，但這可能不值得。

爲什麼不是隻有當fader()函數完成15層時觸發下一個動作？

或者，您可以將回調函數傳遞到fader()，它可以在完成15層時調用它？

我不明白究竟你想要做什麼，而是你做的衰落在15層（看到我添加了else）時，你可以這裏揭開序幕另一個功能：

function fading() { 
    var cntr = -1; 
    function fader() { 
     setTimeout(function() {   
      cntr++; 
      if (cntr < 15) {   
      $('.bar:eq(' + cntr + ')').fadeIn('200'); 
      fader();   
      } else { 
      // done fading in the 15 items, now you can call some other function 
      // here to start the next operation 
      afterFade(); 
      } 
     }, 100); 
    } 
    fader(); 
} 

儘量簡化你的點擊代碼如下：

$('input').click(function(){ 
    $('.bar').hide(); 
    fading(); 
}); 

.hide()是同步的（它不使用動畫隊列），這樣你可以叫fading()後馬上。

您還必須在第二次調用fading()時重新初始化您的cntr變量。在我上面的代碼示例中，我將變量的名稱從i更改爲cntr，並將其定義和初始化移動到fading()函數的頂部，以便在隨後的每次調用時自動初始化它。