title: jQuery ladder slide out list effect
body: <p>I know this should be fairly easy but I can't quite figure it out by myself. <em>facepalm</em>.</p>
  
  <p>I have a site that I'm building at <a href="http://sarahnwatson.com" rel="nofollow">this address</a> and as you can see by looking at it, after the picture loads the menu list items come out of the left side. I just wanted to know how I could make them come out one at a time starting with the top one and working their way down.</p>
  
  <p>Here is the code that makes the slide out effects:</p>
  
  <pre><code>   $(function() {
                  //the loading image
                  var $loader     = $('#st_loading');
                  //the ul element 
                  var $list       = $('#st_nav');
                  //the current image being shown
                  var $currImage  = $('#st_main').children('img:first');
                  //the list of soclial links
                  var $socialLinks = $(".social_links");
                  //the download link
                  var $download = $("a.st_img_download");
  
                  //let's load the current image 
                  //and just then display the navigation menu
                  $('&lt;img&gt;').load(function(){
                      $currImage.fadeIn(3000);
                      $download.attr("href",$currImage.attr("src"));
                      //slide out the menu
                      setTimeout(function(){
                          $loader.hide();
                          $list.animate({'left':'0px'},1000);
                          $socialLinks.animate({ 'bottom': '0px' }, 1000);
                          $download.fadeIn(2000);
                      },
                      1000);
                  }).attr('src',$currImage.attr('src'));
  
                  //calculates the width of the div element 
                  //where the thumbs are going to be displayed
                  buildThumbs();
  
                  function buildThumbs(){
                      $list.children('li.album').each(function(){
                          var $elem           = $(this);
                          var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
                          var $thumbs         = $thumbs_wrapper.children(':first');
                          //each thumb has 180px and we add 3 of margin
                          var finalW          = $thumbs.find('img').length * 183;
                          $thumbs.css('width',finalW + 'px');
                          //make this element scrollable
                          makeScrollable($thumbs_wrapper,$thumbs);
                      });
                  }
  </code></pre>
  
  <p>Although I think that's more than you need...</p>
  
  <p>And here is the HTML structure for the menu:</p>
  
  <pre><code>&lt;ul id="st_nav" class="st_navigation"&gt;
                  &lt;li class="album"&gt;
                      &lt;span class="st_link"&gt;Photo Album&lt;span class="st_arrow_down"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;div class="st_wrapper st_thumbs_wrapper"&gt;
                          &lt;div class="st_thumbs"&gt;
                              &lt;img src="images/album/thumbs/slide1.jpg" alt="images/album/slide1.jpg" /&gt;
                              &lt;img src="images/album/thumbs/slide2.jpg" alt="images/album/slide2.jpg" /&gt;
                              &lt;img src="images/album/thumbs/slide3.jpg" alt="images/album/slide3.jpg" /&gt;
                              &lt;img src="images/album/thumbs/slide4.jpg" alt="images/album/slide4.jpg" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="album"&gt;
                      &lt;span class="st_link"&gt;Videos&lt;span class="st_arrow_down"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;div class="st_wrapper st_thumbs_wrapper"&gt;
                          &lt;div class="st_thumbs"&gt;
                          &lt;span class="caption-wrap"&gt;
                              &lt;img src="http://img.youtube.com/vi/EelyyqU-ce0/0.jpg" alt="videos/SkyscraperCover.mp4" /&gt;
                              &lt;span class="caption"&gt;Skyscraper Cover&lt;/span&gt;
                          &lt;/span&gt;
                          &lt;span class="caption-wrap"&gt;
                              &lt;img src="http://img.youtube.com/vi/KNlwqFWiNaU/0.jpg" alt="videos/DontBreakMyHeartSlow.mp4" /&gt;
                              &lt;span class="caption"&gt;Don't Break My Heart Slow&lt;/span&gt;
                          &lt;/span&gt;
                          &lt;span class="caption-wrap"&gt;
                              &lt;img src="http://img.youtube.com/vi/VwYyRmgutx4/0.jpg" alt="videos/BattleCover.mp4" /&gt;
                              &lt;span class="caption"&gt;Battle Cover&lt;/span&gt;
                          &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span class="st_link"&gt;Bio&lt;span class="st_modal"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;div class="modal"&gt;
                      &lt;div style="width:600px;"&gt;
                          &lt;h2&gt;Bio&lt;/h2&gt;
                          I am alone, and feel the charm of existence in this spot,
                          which was created for the bliss of souls like mine. I am
                          so happy, my dear friend, so absorbed in the exquisite sense
                          of mere tranquil existence, that I neglect my talents.
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                  &lt;span class="st_link"&gt;Contact&lt;span class="st_modal"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;div class="modal"&gt;
                          &lt;h2&gt;Contact&lt;/h2&gt;
                          &lt;form id="contact_form" method="POST" action="#"&gt;
                          &lt;label&gt;Name:&lt;/label&gt;&lt;br /&gt;
                          &lt;input type="text" name="name" /&gt;&lt;br /&gt;
                          &lt;label&gt;Email:&lt;/label&gt;&lt;br /&gt;
                          &lt;input type="text" name="email" /&gt;&lt;br /&gt;
                          &lt;label&gt;Reason:&lt;/label&gt; &amp;nbsp;
                          &lt;label&gt;&lt;input type="radio" name="reason" value="praise" checked='checked' /&gt; Praise&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="reason" value="booking" /&gt; Booking&lt;/label&gt;&lt;br /&gt;
                          &lt;label&gt;Message:&lt;/label&gt;&lt;br /&gt;
                          &lt;textarea name="name"&gt;&lt;/textarea&gt;&lt;br /&gt;
                          &lt;input type="submit" value="Submit" name="submit" /&gt; &lt;span class="status_message"&gt;&lt;/span&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>ul.st_navigation{
      position:absolute;
      width:100%;
      top:140px;
      left:-300px;
      list-style:none;
  }
  ul.st_navigation li {
      float:left;
      clear:both;
      margin-bottom:8px;
      position:relative;
      width:100%;
  }
  ul.st_navigation li span.st_link{
      background: rgba(0,0,0,.8);
      float:left;
      position:relative;
      line-height:50px;
      padding:0px 20px;
      -moz-box-shadow:0px 0px 2px #000;
      -webkit-box-shadow:0px 0px 2px #000;
      box-shadow:0px 0px 2px #000;
  }
  ul.st_navigation li span.st_arrow_down,
  ul.st_navigation li span.st_arrow_up{
      position:absolute;
      margin-left:20px;
      width:40px;
      height:50px;
      cursor:pointer;
      -moz-box-shadow:0px 0px 2px #000;
      -webkit-box-shadow:0px 0px 2px #000;
      box-shadow:0px 0px 2px #000;
  }
  ul.st_navigation li span.st_arrow_down{
      background: rgba(0,0,0,.8) url(../images/icons/down.png) no-repeat center center;
  }
  ul.st_navigation li span.st_arrow_up{
      background: rgba(0,0,0,.8) url(../images/icons/up.png) no-repeat center center;
  }
  ul.st_navigation li span.st_modal{
      position:absolute;
      margin-left:20px;
      width:40px;
      height:50px;
      cursor:pointer;
      -moz-box-shadow:0px 0px 2px #000;
      -webkit-box-shadow:0px 0px 2px #000;
      box-shadow:0px 0px 2px #000;
      background: rgba(0,0,0,.8) url(../images/icons/modal.png) no-repeat center center;
  }
  </code></pre>