用jQuery爲一系列動畫製作動畫，爲什麼隊列以這種方式工作？

Question

我正在消失一系列從左到右的元素，我正在尋找一種優雅的方式來做到這一點，而不使用嵌套函數。隊列似乎節省了一天，但我不明白爲什麼它的工作方式。

這工作：

$('.item').queue(function(next) { 
    $(this).delay(500).animate({opacity: 1}, 1000); 
}); 


$('.item').queue(function(next) { 
    $(this).parent().next('.item').dequeue(); 
    next(); 
}); 


$('.intro i:first').dequeue(); 

這不：

$('.item').queue(function(next) { 
    $(this).delay(500).animate({opacity: 1}, 1000); 
    $(this).parent().next('.item').dequeue(); 
    next(); 
}); 


$('.item').dequeue(); 

它消失他們所有的一次。

我有一個理解，即當一個動畫或出列動作時，隊列會附加一系列的項目以執行。所以...爲什麼這個工作？

Answer 1

我不認爲這是隊列功能的工作方式。該文檔說，它是一個元素上的隊列，而不是像我認爲您嘗試使用它的整個渲染動畫隊列。但是，做你想做的事很簡單。這個怎麼樣：

$(function(){ 
    var queue = $.makeArray($("div"));  
    (function doAnimation(){ 
     var item = queue.pop(); 
     if (item) { 
      $(item).delay(500).animate({opacity: 0.8}, 1000, doAnimation); 
     } 
    })();  
}); 

的jsfiddle：http://jsfiddle.net/6xdeP/1

編輯：更新更清潔的解決方案。

Answer 2

我沒有直接回答你的隊列問題，因爲我不知道動畫隊列是如何工作的。我相信發生的事情是，動畫隊列一次全部觸發$('.item')

但是，我正在回答，希望能夠解決您的問題。

DEMO

HTML

<ul> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
</ul> 

CSS

.item 
{ 
    display:none; 
    position:relative; 
    float:left;  
    border:1px solid black; 
    background-color:green; 
    list-style:none; 
    padding:10px; 
} 

jQuery的

$.fn.ProgressiveFadeIn=function(delay,speed) 
{ 
    if(!delay) delay=500; 
    if(!speed) speed=1000; 
    $(this).each(function(i){ 
     $(this).delay((speed+delay)*i).fadeIn(speed); 
    }); 
} 
$(".item").ProgressiveFadeIn(500,1000); 

Answer 3

var items = $('.item'), 
    index = 0, 
    itemInterval; 

itemInterval = setInterval(function(){ 
    items.eq(index).fadeIn(1000); 
    index++ 
    if(index >= items.length){ clearInterval(itemInterval); } 
}, 500); 

只是我的模式。