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秒，我必须将fadein和fadeout给予20000？如果我希望交易花费1秒钟来完成1到2之间的完成？

编辑：改变正确。现在，它需要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秒。

动画文字淡入其他文字

1 个答案: