Jquery FadeIn один элемент после FadeOut предыдущего div?

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

Я хочу, чтобы приветственное сообщение медленно исчезало, а затем другой div, чтобы исчезать на своем месте, а затем fadeOut - очевидно, когда ящик приветствия больше не существует.

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

Ответы

Ответ 1

Вам нужно вызвать дополнительные fadeIn() и fadeOut внутри функции обратного вызова к первому. Все методы анимации (и многие другие) в jQuery позволяют обратные вызовы:

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

Это приведет к постепенному исчезновению .welcome. Как только он исчезнет, .freelance исчезнет. После того, как он затухает, он затем исчезнет.

Ответ 2

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

Ответ 3

Я считаю, что этот код может работать

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

Ответ 4

Вероятно, вы хотите .delay()

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