jQuery梯子滑出列表效果

我知道这应该是相当容易的，但我不能完全弄清楚自己。 facepalm指 .

我有一个网站，我正在建立在这个地址，正如你可以看到的，通过查看它，图片加载后菜单列表项目从左边出来。我只是想知道如何让它们一次一个地出现，从顶部开始，然后依次向下。

下面是使幻灯片退出效果的代码:

   $(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
                $('<img>').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);
                    });
                }

虽然我认为这比你需要的更多…

<ul id="st_nav" class="st_navigation">
                <li class="album">
                    <span class="st_link">Photo Album<span class="st_arrow_down"></span></span>
                    <div class="st_wrapper st_thumbs_wrapper">
                        <div class="st_thumbs">
                            <img src="images/album/thumbs/slide1.jpg" alt="images/album/slide1.jpg" />
                            <img src="images/album/thumbs/slide2.jpg" alt="images/album/slide2.jpg" />
                            <img src="images/album/thumbs/slide3.jpg" alt="images/album/slide3.jpg" />
                            <img src="images/album/thumbs/slide4.jpg" alt="images/album/slide4.jpg" />
                        </div>
                    </div>
                </li>
                <li class="album">
                    <span class="st_link">Videos<span class="st_arrow_down"></span></span>
                    <div class="st_wrapper st_thumbs_wrapper">
                        <div class="st_thumbs">
                        <span class="caption-wrap">
                            <img src="http://img.youtube.com/vi/EelyyqU-ce0/0.jpg" alt="videos/SkyscraperCover.mp4" />
                            <span class="caption">Skyscraper Cover</span>
                        </span>
                        <span class="caption-wrap">
                            <img src="http://img.youtube.com/vi/KNlwqFWiNaU/0.jpg" alt="videos/DontBreakMyHeartSlow.mp4" />
                            <span class="caption">Don't Break My Heart Slow</span>
                        </span>
                        <span class="caption-wrap">
                            <img src="http://img.youtube.com/vi/VwYyRmgutx4/0.jpg" alt="videos/BattleCover.mp4" />
                            <span class="caption">Battle Cover</span>
                        </span>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="st_link">Bio<span class="st_modal"></span></span>
                    <div class="modal">
                    <div style="width:600px;">
                        <h2>Bio</h2>
                        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.
                    </div>
                    </div>
                </li>
                <li>
                <span class="st_link">Contact<span class="st_modal"></span></span>
                    <div class="modal">
                        <h2>Contact</h2>
                        <form id="contact_form" method="POST" action="#">
                        <label>Name:</label><br />
                        <input type="text" name="name" /><br />
                        <label>Email:</label><br />
                        <input type="text" name="email" /><br />
                        <label>Reason:</label> &nbsp;
                        <label><input type="radio" name="reason" value="praise" checked='checked' /> Praise</label> <label><input type="radio" name="reason" value="booking" /> Booking</label><br />
                        <label>Message:</label><br />
                        <textarea name="name"></textarea><br />
                        <input type="submit" value="Submit" name="submit" /> <span class="status_message"></span>
                        </form>
                    </div>
                </li>
            </ul>

和css:

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;
}