title: How to animate DIV onload through JQuery
body: <pre><code>&lt;script&gt;
  //Animation should start when the window loads
  
  $(window).load(function(){
      $("div.container :nth-child(4)").animate({down: '50px'}, "fast");
  });
  
  //3rd DIV tag changes BG-color on mouseover &amp; changes back on mouse leave
  
  $("div.container :nth-child(3)").mouseover(function(){
      $("div.container :nth-child(3)").css("background-color", "yellow");
  }).mouseleave(function(){
      $("div.container :nth-child(3)").css("background-color", "white");
  });
  
  //1st DIV tag expands on click &amp; resets on mouse leave
  
  $("div.container :nth-child(1)").click(function(){
      $("div.container :nth-child(1)").css("width", "250px");
      $("div.container :nth-child(1)").css("height", "250px");
  }).mouseleave(function(){
      $("div.container :nth-child(1)").css("width", "150px");
      $("div.container :nth-child(1)").css("height", "150px");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="border box"&gt;&lt;/div&gt;
    &lt;div class="border box"&gt;&lt;/div&gt;
    &lt;div class="border box"&gt;&lt;/div&gt;
    &lt;div class="border box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried with $(window).load and $(document).ready and it does not work.
  I want the animation to start when the page loads completely.</p>