jquery FadeIn un elemento dopo FadeOut il precedente div?

Question

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

Voglio che il messaggio di benvenuto si dissolva lentamente e poi l'altro div in dissolvenza al suo posto e poi in dissolvenza - ovviamente quando la casella di benvenuto non esiste più.

<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

È necessario chiamare l'ulteriore fadeIn() e fadeOut all'interno di una funzione di callback al primo. Tutti i metodi di animazione (e molti altri) in jQuery permettono di callback:

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

Questo farà sì che .welcome per fade out prima. Una volta terminata la dissolvenza, lo sbiadimento sarà .freelance. Una volta completato lo sbiadimento, verrà sfumato.

Answer 2

credo che questo codice potrebbe funzionare

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

Answer 3

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

Answer 4

Probabilmente si desidera .delay()

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