CODEWITHSUNDEEP
javascriptjqueryhtml
user1401379
user1401379

Reputation:

How to change text after delay - jQuery

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!

Upvotes: 0

Views: 3693

Answers (3)

Alex Gore
Alex Gore

Reputation: 332

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>

Upvotes: 0

Niko
Niko

Reputation: 26730

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);

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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);

Upvotes: 1

Related Questions