动画文本淡入其他文本

Question

我正在尝试用这个制作动画 HTML:

<div class="client-quote home">
<p>
<a href="/klanten.html">
“Flexibel, meedenken, snel schakelen, creatief, kwaliteit … zo ervaar ik NPN. Een fijne partner, die kennis van zaken en de branche heeft.”
</a>
</p>
<p>
</p>
<p class="center-text">
<a href="/klanten.html">
<em>
Cindy Bastiaansen, Commercieel Medewerker, Healthypharm BV &amp; Neocare BV
</em>
</a>
</p>
<p>
</p>
</div>

我想同时更改淡入淡出的文本。

我该怎么做？使用 :after 和 :before 进行转换？

在评论中使用 jQuery：

jQuery(document).ready(function() {
function doFade() {
    jQuery(".client-quote").fadeIn(1000,function() {
        jQuery(".client-quote").delay(18000).fadeOut(1000);
        setTimeout(fadeTwo,19000);
    });
}

function fadeTwo() {
    jQuery(".client-quote2").fadeIn(1000,function() {
        jQuery(".client-quote2").delay(18000).fadeOut(1000);
        setTimeout(fadeThree,19000);
    });
}

function fadeThree() {
    jQuery(".client-quote3").fadeIn(1000,function() {
        jQuery(".client-quote3").delay(18000).fadeOut(1000);
        setTimeout(doFade,19000);
    });
}
doFade();

});

现在是正确的。只是时间，我不明白它是怎么回事。如果我想让所有文本停留 20 秒，我必须将淡入和淡出设置为 20000？如果我希望交易仅花费 1 秒来完成一到两个之间的交易？

编辑：正确更改。现在，它需要 1 秒显示第一个，然后，等待 18 秒什么都不做，再过一秒，它隐藏，出现第二个。

动画时长：60 秒。

Answer 1

动画完成 jQuery:

使用了属性：setTimeOut fadeOut fadeIn

animation.js:

jQuery(document).ready(function() {
    function doFade() {
        jQuery(".client-quote").fadeIn(1000,function() {
            jQuery(".client-quote").delay(18000).fadeOut(1000);
            setTimeout(fadeTwo,19000);
        });
    }

    function fadeTwo() {
        jQuery(".client-quote2").fadeIn(1000,function() {
            jQuery(".client-quote2").delay(18000).fadeOut(1000);
            setTimeout(fadeThree,19000);
        });
    }

    function fadeThree() {
        jQuery(".client-quote3").fadeIn(1000,function() {
            jQuery(".client-quote3").delay(18000).fadeOut(1000);
            setTimeout(doFade,19000);
        });
    }
    doFade();
});

动画时长：60 秒。

动画文本淡入其他文本

Animation text fade-in other text

css

animation

fadein