jQuery FadeIn在FadeOut后的上一个div元素? [英] jquery FadeIn one element after FadeOut the previous div?

问题描述

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

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

I want the welcome message to fadeOut slowly and then the other div to fadeIn its place and then fadeOut - obviously when the welcome box no longer exists.

<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>

推荐答案

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

You need to call the additional fadeIn() and fadeOut inside of a callback function to the first one. All animation methods (and many others) in jQuery allow for callbacks:

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

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

This will cause .welcome to fade out first. Once it's done fading out, .freelance will fade in. Once it's done fading in, it will then fade out.

这篇关于jQuery FadeIn在FadeOut后的上一个div元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！