文本淡入和淡出jQuery

Question

我有一个问题。 我有两个文字。 在页面加载时，当第一个文本淡出时，我希望第二个文本在同一行中淡出，第二个文本应保留。 这是我的小提琴http://jsfiddle.net/st6rxwjr/1/

这是我的代码：

<div class="text1 animated  zoomIn">Welcome to our site</div>
<div class="animated text2 bounceIn">Company Name</div>

CSS：

body { padding-top:30px;}
.text2 {
    display: none;
}
div {
    font-size:30px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
}

JS：

function fade() {
    $('.text1').fadeIn().delay(2000).fadeOut();
    $('.text2').delay(2000).fadeIn();
}
    fade();

Answer 1

尝试使用回调函数，如下所示：

function fade() {
    $('.text1').fadeIn().delay(2000).fadeOut(1000,function(){
        $('.text2').delay(2000).fadeIn();
    });
}

如果您不希望任何缓慢的淡入效果，可以将0而不是1000放进去。

Answer 2

我认为您需要： Fiddle。

更改您的Jquery代码text2延迟。 您给了2000，所以text2将在text1消失之前出现。

function fade() {
        $('.text1').fadeIn().delay(2000).fadeOut();
        $('.text2').delay(2500).fadeIn();

}
    fade();