jquery动画：更改元素'；一个接一个

你知道如何一个接一个地设置每个特定元素（最多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>

谢谢。

试试这个：

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

小提琴：

您可以使用

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

功能衰减（索引）{
$（'.block item'）.eq（索引）.animate({
不透明度：0
}，函数（）{
//完成后，递归地调用我自己
//针对下一个元素
如果（指数<15）{
衰减（指数+1）；
}
})
}
衰减（0）；

---

请参阅使用回调的选项，如果要在回调到达第16个元素时停止，可以使用

.index（）

var f=函数（$current）{
$current.animate({
不透明度：0
}，函数（）{
if（$current.next（“.block item”）.index（）<15）{
f（$current.next（“.block item”））；
}
});
};
f(元);；

---

@alnitak，没有看到。。hmmmm@NealFWIW您的解决方案可能只需将

.lt（16）

放在

.each（）

调用之前即可修复。@alnitak-hmm将其作为一个选项添加到我的答案中。@Neal-ah，这是一个无法作为函数使用的选择器：（@alnitak，我将其添加到选择器中）

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

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