CODEWITHSUNDEEP
jqueryhtml
user8458147
user8458147

Reputation:

jQuery fadeIn / fadeOut

Essentially I'm trying to fade div 1 in then out after a specified amount of time. After div 1 has faded out, shortly after div 2 will fade in.

https://jsfiddle.net/hwyw5ssf/5/

$("#title").hide(function(){
  $("#title").fadeIn(5000).next().delay('500', function(){
    $("#title").fadeOut(5000);
    $("#hub").hide(function(){
      $("#hub").fadeIn(5000);
    });
  });
});

Upvotes: 1

Views: 2705

Answers (3)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/hwyw5ssf/6/

$('div').hide();
$('#title').fadeIn("slow", function(){
  $(this).fadeOut("slow", function(){
    setTimeout(function(){
      $('#hub').fadeIn("slow");
    }, 2000);
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

First div will fadeOut immediately & second div will fadeout after 2sec of first div.

And for 2sec gap I've used setTimeout

Hope this will help you.

Upvotes: 1

Frish
Frish

Reputation: 1421

I recommend selecting the divs differently than I did, .next() is a useful function in this regard and could in this example be used to replace the explicit reference to '#hub' for instance.

// hide all divs
$( 'div' ).hide()

// fade in: duration 1s on complete call function
$( '#title' ).fadeIn(1000, function(){

    // fade out: duration 1s, on complete call function
    $( '#title' ).fadeOut(1000, function(){

    // fade in: duration 1s
    $( '#hub' ).fadeIn(1000)
  })
})

Upvotes: 2

SilverSurfer
SilverSurfer

Reputation: 4368

I think you are looking for this, just use setTimeout function:

$(document).ready(function(){
    setTimeout(function(){
         $("#title").fadeIn(2000)
         $("#hub").fadeIn(4000)
        }, 2000);
        setTimeout(function(){
         $("#title").fadeOut(4000)
         $("#hub").fadeOut(2000)
        }, 2000);
});
#hub, #title{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

Upvotes: 1

Related Questions