1

我正在从左到右淡化一系列元素，我正在寻找一种优雅的方式来做到这一点，而不使用嵌套函数。队列似乎可以挽救局面，但我不明白为什么它会这样工作。

这有效：

$('.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();

它一次将它们全部淡化。

我的理解是，队列在动画或出队触发时附加了一系列要执行的项目。那么......为什么这有效？

4

3 回答 3

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

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

这只是我的模式。

于 2013-03-01T20:18:39.127 回答
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

编辑：更新为更清洁的解决方案。

于 2013-03-01T19:56:41.513 回答
1

我没有直接回答你的队列问题，因为我真的不知道动画队列是如何工作的。我相信正在发生的事情是动画队列一次全部触发$('.item')

但是，我正在回答希望能解决您的问题。

演示

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);
于 2013-03-01T19:56:42.217 回答