css - 动画文本淡入其他文本

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

动画.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 秒。