fadeto - jquery FadeIn un elemento después de FadeOut el div anterior?

jquery fadeto

Question

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

Quiero que el mensaje de bienvenida desaparezca lentamente y luego el otro div se desvanezca en su lugar y luego desaparezca, obviamente cuando el cuadro de bienvenida ya no existe.

<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

Creo que este código podría funcionar.

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

Answer 2

Probablemente quieras .delay ()

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

Answer 3

fadeIn() llamar a fadeIn() y fadeOut dentro de una función de devolución de llamada a la primera. Todos los métodos de animación (y muchos otros) en jQuery permiten la devolución de llamadas:

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

Esto hará que .welcome desaparezca primero. Una vez que haya terminado de desvanecerse, .freelance se desvanecerá. Una vez que haya terminado de desvanecerse, se desvanecerá.

Answer 4

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