CODEWITHSUNDEEP
jqueryhtmlfadein
Kaboom
Kaboom

Reputation: 684

jQuery fadeIn effect not working

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.

Upvotes: 0

Views: 570

Answers (2)

Yaje
Yaje

Reputation: 2831

Modified Andreas' answer a little bit to add more ease in its fade:

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

You can play around the delays.

Upvotes: 1

Andreas
Andreas

Reputation: 21881

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>

Upvotes: 3

Related Questions