jquery FadeIn one element after FadeOut the previous div?

Question

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

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>

The problem is.. both boxes appear at the same time and both then fade out at the same time/ish — TheBlackBenzKid, Sep 24 '11 at 13:05

maxedison · Accepted Answer · 2017-07-26T06:30:43.710

31

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);
        });
    });
});

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.

edited Jul 26 '17 at 06:30

answered Sep 24 '11 at 13:10

maxedison

17,243
14
67
114

I got it working by hiding it first using your code: jQuery(document).ready(function(){ $(".freelance").hide(); $(".welcome").fadeOut(6500,function(){ $(".freelance").fadeIn(2500, function(){ $(".freelance").fadeOut(4500); }); }); }); – TheBlackBenzKid Sep 24 '11 at 15:00
I did that too so that it does not hide on the page load. Using .hide can make it appear during load and then disappear after load which makes a bad UX – TheBlackBenzKid Sep 26 '11 at 09:28

Joakim · Answer 2 · 2011-09-24T13:14:47.793

1

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

edited Sep 24 '11 at 13:14

answered Sep 24 '11 at 13:09

Joakim

2,217
15
20

almost right, except you need the fadeOut of .freelance to be in the callback of the fadeIn call on .freelance. Your current code is both fading .freelance in and out at the exact same time. – maxedison Sep 24 '11 at 13:13
@maxedison thank you, it still works the way it was meant tho, edited my answer anyway. – Joakim Sep 24 '11 at 13:15

score 0 · Answer 3 · answered Sep 24 '11 at 13:08

0

I believe that this code might work

$(".welcome").fadeOut(9500).queue(function(next) { 
    $(".freelance").fadeIn(10000).queue(function(next) {
        $(".freelance").fadeOut(4500);
    });
});

answered Sep 24 '11 at 13:08

jwchang

10,584
15
58
89

score 0 · Answer 4 · answered Sep 24 '11 at 13:09

0

You probably want .delay()

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

answered Sep 24 '11 at 13:09

genesis

50,477
20
96
125

jquery FadeIn one element after FadeOut the previous div?

4 Answers4

Linked

Related