有没有可能的解决方案,一个接一个地淡入(500)多个列表元素?
<ul id="list">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
你可以做一个递归函数,当没有 LI 时停止,如下所示:
function fadeLI(elem) {
elem.fadeIn(500, function() { fadeLI($(this).next()); });
}
fadeLI($("#list li:first"));
你可以这样做..将每个子元素添加到一个数组中并创建一个函数,看看数组的长度是否大于 0,然后它是数组的第一项,fadeToggle 是子元素,而子元素又在fadeToggle 并跳转到下一个子元素。有关 shift() 的更多信息,请查看http://www.w3schools.com/jsref/jsref_shift.asp
var toggleList = [];
$("#container").children().each(function() {
toggleList.push(this);
});
function fadeToggleList(toggleList) {
if (toggleList.length > 0) {
var currentChild = toggleList.shift();
$(currentChild).fadeToggle(50, function() {
fadeToggleList(toggleList);
});
}
}
fadeToggleList(toggleList);
您想要一个递归函数来检查是否有另一个 li 元素,如果有,则将其淡入...
function fadeInNext(el){
if(el.next('li')){
el.next('li').fadeIn(500,fadeInNext)
}
}
$('...').fadeIn( 500, fadeInNext )