jQuery阶梯滑出列表效果

Question

我知道这应该相当容易，但我自己无法完全弄清楚。 捂脸。

我正在此地址构建一个网站，正如您通过查看它所看到的，在图片加载后菜单列表项从左侧出现。我只是想知道如何让它们一次一个地出现，从顶部开始，一直向下。

这是制作滑出效果的代码：

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

虽然我认为这超出了您的需要...

这是菜单的 HTML 结构：

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

Answer 1

试试这个：

$('<img>').load(function(){
    $currImage.fadeIn(3000);
    $download.attr("href",$currImage.attr("src"));
    //slide out the menu
    setTimeout(function(){
        $loader.hide();
        $list.children().each(function(i,el) { // loop through the LI elements within $list
            $(el).delay(500*i).animate({'left':'0px'},1000);
        });
        $socialLinks.animate({ 'bottom': '0px' }, 1000);
        $download.fadeIn(2000);
   },
   1000);
}).attr('src',$currImage.attr('src'));

Answer 2

当您使用 animate() 时，您可以指定回调作为最后一个参数，您可以将幻灯片链接到元素：

                setTimeout(function(){
                    $loader.hide();
                    $firstElement.animate({'left':'0px'},1000, function(){
                          $secondElement.animate({'left':'0px'},1000, function(){ 
                             //and so on
                           }); 
                     });
                    $socialLinks.animate({ 'bottom': '0px' }, 1000);
                    $download.fadeIn(2000);
                },
                1000);

如果您在 jsfiddle.net 上提供一些内容或在此处发布您的 html 代码和完整的 js，那么更容易提供帮助