CODEWITHSUNDEEP
jqueryhtml
plugincontainer
plugincontainer

Reputation: 630

How to fadeOut one div and fadeIn another div with jquery timing?

Thanks to this answer, I can get a div to fade-out after 3 seconds. But I can't get a second div to fade-in after 3 seconds - that div is already on-screen from zero. The code is:

 $(document).ready( function() {
    $('#blue').delay(3000).fadenOut(100);
    $('#red').delay(3000).fadeIn(100);
  });

Demo: http://www.casedasole.it/stack/

The idea is to have div 1 (blue) dissolve and reveal div 2 (red).

Please note: I've offset div 1 to show how div 2 is "always there". I need to hide div 2 because in testing, div 2 appears before div 1 covers it.

Upvotes: 2

Views: 1007

Answers (3)

Fahad Khan
Fahad Khan

Reputation: 1635

JQUERY SOLUTION, TRY THIS

 $(document).ready(function() {
    $( "#blue" ).delay(3000).fadeOut( 100, function() {
         $('#red').fadeIn(100);
    });
 });

With adding display:none to #red as one suggested.

here is DEMO

Upvotes: 1

tomasantunes
tomasantunes

Reputation: 945

I would insert a .hide at the beginning, like this:

$(document).ready( function() {
    $('#blue').delay(3000).fadenOut(100);
    $('#red').hide().delay(3000).fadeIn(100);
});

Upvotes: 1

Stanimir Stoyanov
Stanimir Stoyanov

Reputation: 1213

You should add display:none; in #red's styles, so that it'll be hidden when you open the page initially.

 $(document).ready(function() {
   $('#blue').delay(3000).fadeOut(100);
   $('#red').delay(3000).fadeIn(100);
 });
html,
body {
  background-color: yellow
}
#red {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: #f00;
  display: none;
}
#blue {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 200;
  background-color: #00f;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>

Upvotes: 2

Related Questions