title: jQuery function in time interval
body: <p>I am using this jQuery code to animate two <code>div</code>'s and and when the page load the divs are already there .Then it start the animation. How do I hide the div when the page load and start this animation after few seconds one after the other.</p>
  
  <p>Here is the process that I am expecting  </p>
  
  <p>(page load -> after few seconds -> <code>#float img</code> load -> after few seconds- ><code>#floatbubble</code> load)</p>
  
  <pre><code>&lt;script&gt;
      $(function(){
          var effect_selector = "#float img";
          $(effect_selector).height(0);
          $(effect_selector).width(0);
          $(effect_selector).animate({ width: 125, height : 125 },"slow",function(){
              $(effect_selector).removeAttr("style");
  
              //Another effect
              var effect_selector = "#floatbubble";
              $(effect_selector).height(0);
              $(effect_selector).width(0);
              $(effect_selector).animate({ width: 125, height : 125 },"slow",function(){
                  $(effect_selector).removeAttr("style");
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3L4kq561/" rel="nofollow">Jsfiddle DEMO</a></p>