我知道这应该相当容易，但我自己也无法弄明白。 捂脸
我有一个我正在this address建立的网站，正如您所看到的那样，在图片加载后，菜单列表项目从左侧出来。我只是想知道如何让它们一次一个地从最上面的一个出来然后继续下去。
以下是制作幻灯片效果的代码：
$(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>
<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;
}
答案 0 :(得分：2)
试试这个：
$('<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'));
答案 1 :(得分：0)
当您使用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，则更容易提供帮助