Javascript 使用SetTimeOut淡出相互平铺的元素列表

假设我有一个使用z-index相互平铺的元素列表。例如：

<div id="lyrics">
   <div class="lyric" style="z-index: 1000" val="2000">This is the first sentence</div>
   <div class="lyric" style="z-index: 100" val="2000">Second sentence is here</div>
   <div class="lyric" style="z-index: 10" val="0">And the third one</div>
</div>

---

您正在设置它们在2秒内开始淡出，以便它们立即全部消失。要使一个动画紧跟另一个动画，您需要设置递增超时，其中每一个都设置为前一个动画之后的时间，或者使其在第一个动画完成时开始下一个动画，依此类推

这里有一种累积计时器的方法，您可以将每个项目的

val

属性设置为每个项目的适当累积延迟：

$(".lyric").each(function(){
    var item = $(this);
    item.delay(item.attr("val")).fadeOut("fast");
});

这里有一种使用完成函数将它们一个接一个地链接起来的方法，您可以将

val

属性设置为淡出此项之前的延迟（而不是累积延迟）：

（函数（）{
变量项=$（“.lyric”）；
var指数=0；
函数next（）{
if（索引<项目长度）{
var item=items.eq（index++）；
item.delay（item.attr（“val”））.fadeOut（“fast”，下一个）；
}
}
next（）；
})();

注意，在这两个示例中，您可以对所有jQuery动画使用

.delay（）

，而不是设置自己的

setTimeout（）

---

另外，请注意，您应该先使用

data val=“2000”

，然后使用

.data（“val”）

，将其读取为符合HTML5的格式。

您正在将它们设置为在2秒内开始淡出，以便它们立即消失。要使一个动画紧跟另一个动画，您需要设置递增超时，其中每一个都设置为前一个动画之后的时间，或者使其在第一个动画完成时开始下一个动画，依此类推

这里有一种累积计时器的方法，您可以将每个项目的

val

属性设置为每个项目的适当累积延迟：

$(".lyric").each(function(){
    var item = $(this);
    item.delay(item.attr("val")).fadeOut("fast");
});

这里有一种使用完成函数将它们一个接一个地链接起来的方法，您可以将

val

属性设置为淡出此项之前的延迟（而不是累积延迟）：

（函数（）{
变量项=$（“.lyric”）；
var指数=0；
函数next（）{
if（索引<项目长度）{
var item=items.eq（index++）；
item.delay（item.attr（“val”））.fadeOut（“fast”，下一个）；
}
}
next（）；
})();

注意，在这两个示例中，您可以对所有jQuery动画使用

.delay（）

，而不是设置自己的

setTimeout（）

---

另外，请注意，您应该先使用

data val=“2000”

，然后再使用

.data（“val”）

，将其读取为与HTML5兼容。

您没有传递延迟值。试试这个：

HTML:

我已经更改了值，以便您可以看到动画

---

这是您没有传递延迟值的工作状态。试试这个：

HTML:

我已经更改了值，以便您可以看到动画 这是工作票

(function() {
    var items = $(".lyric");
    var index = 0;

    function next() {
        if (index < items.length) {
            var item = items.eq(index++);
            item.delay(item.attr("val")).fadeOut("fast", next);
        }
    }
    next();
})();

<div id="lyrics">
   <div class="lyric" style="z-index: 1000" val="2000">This is the first sentence</div>
   <div class="lyric" style="z-index: 100" val="1000">Second sentence is here</div>
   <div class="lyric" style="z-index: 10" val="500">And the third one</div>
</div>

function sto(varx, delay) {
    setTimeout(function() {
        varx.fadeOut("fast");
    }, delay);
}

$(".lyric").each(function(){
    var delay = $(this).attr("val");
    sto($(this), delay);
});