Question

我意识到之前有人问过这件事。我做过研究，但仍然有问题。这是HTML。我需要每个文本块逐渐淡出：

<div id="home-landing-text">
    <span class="block">When A Building Is</span> 
    <span class="block">The Last of Its Kind,</span>
    <span class="block">It Deserves To Be Truly</span>
    <span class="block">Memorable.</span>
</div>

和jQuery：

var i = 0;
$('#home-landing-text span').each( function () {
    i = i + 1.5;
    var that = $(this);
    setTimeout( function () {
        that.css('opacity', 1);
    }, i );
});

CSS：

#home-landing-text span{
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

他们都在一起消失。任何线索为什么？ PS，fadeIn（）不起作用，因为它将它们变成内联块，但它们需要是块。我试过fadeTo（），但遇到了同样的问题。我认为计时器不起作用。

Answer 1

也许1.5毫秒还不足以让你注意到？ 1000毫秒= 1秒

Answer 2

setTimeout函数中的第二个参数是以毫秒为单位的延迟。所以你应该在1500年增加i。

var i = 0;
$('#home-landing-text span').each( function () {
    i = i + 1500;
    var that = $(this);
    setTimeout( function () {
        that.css('opacity', 1);
    }, i );
});

Answer 3

你在jQuery中都有一个迭代计数器，更好地使用：

$('#home-landing-text span').each( function (iterationCount) {
    var that = $(this);
    setTimeout( function () {
        that.css('opacity', 1);
    }, iterationCount * 1500 );
});

DEMO

使用setTimeout逐渐淡入项目

3 个答案: