动画文本淡入其他文本答案

【问题标题】：Animation text fade-in other text动画文本淡入其他文本
【发布时间】：2015-06-08 14:07:34
【问题描述】：

我试图用这个 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 与过渡一起使用？

在 cmets 上使用 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 到 2 之间完成？

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

动画时长：60 秒。

【问题讨论】：

您要在什么事件上制作动画？比如是什么导致文字褪色？
我想将文本更改为另一个，具有相同的结构。文字我不知道是哪一个，只是换另一个，仅此而已。原因是时间，每.. 40 秒.. 我不在乎，我只想知道最好的方法是什么。
检查这个答案它可能会帮助你stackoverflow.com/questions/8616395/…
@UsmanArshad 是的，它可以帮助我，但是 jquery 不起作用，我不知道为什么，我编辑代码以显示我在做什么
好的，首先，我使用 # 而不是 .和 $ 而不是 jQuery。

标签： css animation fadein

【解决方案1】：

动画是用 jQuery 完成的：

使用的属性：setTimeOutfadeOutfadeIn

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

【讨论】：