JQuery FadeIn эффект не работает

Question

Я пытаюсь загрузить страницу с текстом Welcome back! в DIV, а затем через 10 секунд исчезают его и изменить текст Account Dashboard и затем исчезают в.

Это то, что я м при использовании в настоящее время:

$('.recover_back_top_title').fadeIn().html("Welcome back!").delay(10000).fadeOut().delay(10000).html("Account Dashboard").fadeIn(); 

в настоящее время все это просто мгновенно идти до конца и установить текст аккаунта панели, не делая каких-либо эффектов. Я что-то упускаю?

И ничего не отображается в консоли для ошибок.

Answer 1

Передайте функцию fadeIn/fadeOut, которая будет вызвана после того, как анимация закончила

$('.recover_back_top_title').fadeIn(function() { 
 
    $(this).html("Welcome back!") 
 
     .delay(2000) 
 
     .fadeOut(function() { 
 
      $(this).delay(2000) 
 
        .html("Account Dashboard") 
 
        .fadeIn(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="recover_back_top_title"></div>

Answer 2

Модифицированный ответ Андреаса немного, чтобы добавить больше легкости в увядает:

$('.recover_back_top_title').fadeIn("slow",function() { 
    $(this).html("Welcome back!") 
     .delay(2000) 
     .fadeOut("slow",function() { 
      $(this).delay(2000) 
        .html("Account Dashboard") 
        .fadeIn(); 
    }); 
}); 

Вы можете играть вокруг задержек.