jquery FadeIn one element after FadeOut the previous div?

Question

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

Answer 1

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

Answer 2

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.

Answer 3

You probably want .delay()

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

Answer 4

I believe that this code might work

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