title: Hiding text navigation when navigation close
body: <p>Here i create a navigation but when you click on the navigation '+' all the links show up right away and i want them to be shown syncronized with the animation.</p>
  
  <p>Here is the fiddle link: <a href="http://jsfiddle.net/6xVNz/3/" rel="nofollow">http://jsfiddle.net/6xVNz/3/</a></p>
  
  <p>The jquery code:</p>
  
  <pre><code>$("#open").click(function(){
      $(".nav, #close").show();
     $(".nav li").show();
      $(".nav li").each(function (i) {
          $(this).delay(50*i).animate({width:150},50); // Change 300 to something else if you like
      });
      $("#open").hide();
  });
  
  $("#close").click(function(){
      $("#close").hide();
          $($(".nav li").get().reverse()).each(function (i) {
              $(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
      });
      $("#open").show();
  });
  </code></pre>