Javascript jQuery梯形图滑出列表效果

我知道这应该是相当容易的，但我自己也不太明白。脸掌

我有一个网站，我正在建设，你可以看到，在图片加载后，菜单列表项目从左侧出来。我只是想知道我怎样才能让他们一次一个的出来，从最上面的开始，一路走下去

下面是制作滑出效果的代码：

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

使用时，可以将回调指定为最后一个参数，可以将元素的滑入链接起来：

                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，那么帮助您就更容易了

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

---

$（'each（）或find（）和each（）有什么办法吗或者什么…？不，这不是那么容易，你可以做一个函数，以更好的方式处理所有的事情，只是为了让你开始我知道了，css中的一些东西弄乱了它，但是如果我把它设置为300px而不是0px，它就会工作。我现在发布css，但我不知道这是否对我们有帮助。我想这可能是css定位问题。G小伙子，你弄明白了。
                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);

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