jQuery fadeIn Effekt nicht funktioniert

Question

Ich versuche, die Seite mit dem Text Welcome back! in den div zu laden und dann nach 10 Sekunden, um es auszublenden und Text zu Account Dashboard ändern und dann verblassen in.

Das ist, was ich m zur Zeit:

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

derzeit werden alle es geht es hin nur sofort bis zum Ende und legen sie den Text Dashboard Konto ohne Effekte zu tun. Fehle ich etwas?

In der Konsole wird nichts angezeigt.

Answer 1

Pass eine Funktion fadeIn/fadeOut, die nach der Animation

aufgerufen wird

$('.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

Modified Andreas' Antwort ein wenig hinzuzufügen mehr Leichtigkeit in seiner verblassen beendet hat:

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

Sie können die Verzögerungen spielen.