jQuery fadeIn effect not working

Question

I'm trying to load the page with the text Welcome back! in the div and then after 10 seconds fade it out and change text to Account Dashboard and then fade in.

This is what I'm using currently:

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

Currently all it does it just instantly go to the end and set the text to Account Dashboard without doing any effects. Am I missing something?

There is nothing showing in console for errors either.

Answer 1

Pass a function to fadeIn / fadeOut which will be called after the animation has finished

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