jquery FadeIn 在 FadeOut 前一个 div 之后的一个元素？

Question

jQuery(document).ready(function(){
    $(".welcome").fadeOut(9500);
    $(".freelance").fadeIn(10000);
    $(".freelance").fadeOut(4500);
});

我希望欢迎消息慢慢淡出，然后另一个 div 淡入其位置，然后淡出 - 显然当欢迎框不再存在时。

<header>
    <h1 class="left"><a href="index.html"></a></h1>
    <div class="left yellowbox welcome"><p>Welcome to my portfolio.</p></div>
    <div class="left greenbox freelance"><p>I am currently available for for work, contact me below.</p></div>
</header>

Answer 1

您需要在第一个回调函数中调用附加的 fadeIn() 和 fadeOut 。 jQuery 中的所有动画方法(以及许多其他方法)都允许回调:

jQuery(document).ready(function(){
    $(".welcome").fadeOut(9500,function(){
        $(".freelance").fadeIn(10000, function(){
            $(".freelance").fadeOut(4500);
        });
    });
});

这将导致 .welcome 首先淡出。淡出完成后，.freelance 将淡入。淡入完成后，它将淡出。