title: jQuery Animation Delay
body: <p>How do I delay animation with jQuery? </p>
  
  <p>I need to get a navigation to expand the width, and then expand the height, and then reversed for the reverse animation.</p>
  
  <p>Code:</p>
  
  <pre><code>$(function() {
      $("#nav li").not("#logo, #nav li ul li").hover(function(){
          $(this).animate({width:"200px"},{queue:false,duration:1000});
      }, function(){
          $(this).animate({width:"30px"},{queue:false,duration:1000});
      });
  
  
      $("#nav li.parent").hover(function(){
          $(this).children("ul").animate({height:"40px"},{queue:false,duration:500});
      }, function(){
          $(this).children("ul").animate({height:"0px"},{queue:false,duration:500});
      });
  });
  </code></pre>