jQuery动画：逐个更改元素不透明度

Question

有什么办法可以逐个地以动画方式将最多16个目标/元素的不透明度进行更改？

这将同时更改元素的不透明度。

$('.block-item').animate({
        opacity:0
    },500);

请点击这里查看。

但我希望透明度一个接一个地改变，当它达到第16个元素时停止。

以下是HTML代码：

<div id="parent_container">

<div class="block-item">1</div>
<div class="block-item">2</div>
<div class="block-item">3</div>
<div class="block-item">4</div>
<div class="block-item">5</div>
<div class="block-item">6</div>
<div class="block-item">7</div>
<div class="block-item">8</div>
<div class="block-item">9</div>
<div class="block-item">10</div>
<div class="block-item">11</div>
<div class="block-item">12</div>
<div class="block-item">13</div>
<div class="block-item">14</div>
<div class="block-item">15</div>
<div class="block-item">16</div>
<div class="block-item">17</div>
<div class="block-item">18</div>

</div>

我写了这个函数，但它会使任何浏览器崩溃。

function opacity_test(index)
{
    $('.block-item').eq( index ).animate({
        opacity:0
    },500);

    setInterval( function() {
        opacity_test(index + 1);
    }, 1000 );
}

谢谢。

- Run

Answer 1

试试这个：

var delay = 0;
$('.block-item:lt(16)').each(function(){ 
               //^^ do for every instance less than the 16th (starting at 0)
    $(this).delay(delay).animate({
        opacity:0
    },500);
    delay += 500;
});

代码演示：http://jsfiddle.net/maniator/VS8tQ/3/

- Naftali

Answer 2

您可以使用 .animate() 的“完成回调”来启动下一个淡入淡出动画：

function fade(index) {
    $('.block-item').eq(index).animate({
        opacity: 0
    }, function() {
        // on completion, recursively call myself
        // against the next element
        if (index < 15) {
            fade(index + 1);
        }
    })
}

fade(0);

请参见http://jsfiddle.net/alnitak/3DuTG/。

- Alnitak

---

@alnitak，没有看到那里... 嗯嗯 - Naftali

@Neal FWIW，你的解决方案可能只需在.each()调用之前放置.lt(16)即可修复。 - Alnitak

@alnitak 嗯，我会把那个作为一个选项添加到我的答案中。 - Naftali

@Neal - 啊，那是其中一个选择器，它不作为函数提供:( - Alnitak

@alnitak，我已将其添加到选择器中。 - Naftali

Answer 3

您可以使用回调函数和.index()方法，在到达第16个元素时停止。

var f = function($current) {
    $current.animate({
        opacity: 0
    }, function() {
        if ($current.next(".block-item").index() < 15) {
            f($current.next(".block-item"));
        }
    });
};

f($(".block-item:first"));

Example on jsfiddle

- Mark Coleman