How to change text after delay - jQuery

Question

I have two divs with individual id's and a class to style the same.

foo_1 has a z-index so it's above foo_2.

<div id="foo_1" class="foo"><p>I'm awesome.</p></div>
<div id="foo_2" class="foo"><p>No, I am.</p></div>

What I'd like to do is to have foo_1 fade out with foo_2 behind it.

I did try this;

HTML

<div id="foo_1" class="foo"><p>I'm awesome</p></div>
<div id="foo_2" class="foo" style="display: none;"><p>No, I am.</p></div>

jQuery

$(document).ready(function()
{
    setTimeout(function()
    {
        $("#foo_1").fadeOut("slow", function ()
        {
            $("#foo_1").remove();                
            $("#foo_1").html($("#foo_2").text());
            $("#foo_1").show();
        });
     }, 5000);
 });

​ Thanks!

Answer 1

setTimeout(function()
    {
        $("#foo_1").fadeOut("slow", function ()
        {
            // remove $("#foo_1").remove(); 
            // line from code, 
            // because, its removing #foo_1 from dom, 
            // so in next strp you can't catch it

            // $("#foo_1").remove();           
            $("#foo_1").html($("#foo_2").text());
            $("#foo_1").show();
        });
     }, 5000);

Answer 2

Sounds to me like what you're doing is a bit of an overkill.

Let me summarize: You have two divs, they are positioned at the same spot, but only #foo_1 is visible because it's on top. You now want to hide #foo_1 to reveal #foo_2.

So it should be sufficient to make #foo_2 visible while fading out #foo_1:

setTimeout(function() {
    // Make #foo_2 visible
    $('#foo_2').show();

    // Fade out #foo_1
    $('#foo_1').fadeOut('slow');
}, 5000);

Answer 3

Just use standard jQuery function with parameter in ms FadeOut(500) , FadeIn(500) :

 $(document).ready( function () { $('#foo_1').fadeOut(1500); $('#foo_2').text('No, I am!').fadeIn(1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='foo_1' style='display:block;'> I'm awesome </div> <div id ='foo_2' style='display:none;'></div>