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

这是我的模式。

使用jQuery动画系列，为什么队列以这种方式工作？

3 个答案: