I have two div

E.g.

<div class="first">
   //Div first content
</div>

<div class="second">
   //Div second contents
</div>

Initially div second is hidden . I want to show div "second" after loading div "first" with a delay.

I triend $('first').load() in jquery ,but it is not working. I am pletely new to jquery,how to do it in an efficient way

I have two div

E.g.

<div class="first">
   //Div first content
</div>

<div class="second">
   //Div second contents
</div>

Initially div second is hidden . I want to show div "second" after loading div "first" with a delay.

I triend $('first').load() in jquery ,but it is not working. I am pletely new to jquery,how to do it in an efficient way

• javascript
• jquery
• html
• css

• where is your scripts which tried so far – Azad Commented Nov 14, 2015 at 16:28
• Do you need to show the second after a while, or showing second after the first one is actually loaded? – holden Commented Nov 14, 2015 at 16:36
• Not sure if it was just a typo in when copying it over, but you're missing the period in your class selector. You wrote $('first').load() but it should be $('.first').load() – catch22 Commented Nov 15, 2015 at 17:13

2 Answers 2

try this

$(document).ready(function() {
$(".second").delay(2000).fadeIn(500);
});

You can wait for the first div to load before loading the second using either the .ready or .load methods provided by jQuery. Here's a fiddle to see it in action.

.second {
  display: none;
}


$('.first').ready(function() {
  setTimeout(function() {
    $('.second').css("display", "block");
  }, 500);
});