jquery - 依次使用 .fadeIn()

Question

我有一堆 div，默认设置为display:none，我想在延迟 500 毫秒后一个一个地淡入。下面的方法效果很好，但它应该是这样吗？如果没有更多 div 的值会display:none怎样？

function myFadeIn() {
    $(".myItems:hidden:first").fadeIn(500, function(){ myFadeIn(); });
}

("#myButton").click(function(){
    myFadeIn();
});

Answer 1

我做了一些小改动，部分是为了让你的函数更通用，否则你的代码应该可以工作。

function recursiveFadeIn(selector) {
    $(selector+":hidden").eq(0).fadeIn(400, function(){ 
        recursiveFadeIn(selector); 
    });
}

$("#myButton").on("click",function(e){
    recursiveFadeIn("ul > li");
});

这是jsfiddle：http: //jsfiddle.net/qNABc/1/

我用 eq(0) 替换了 ":first" 选择器以提高性能（参见 jQuery :first vs. .first()），如果你对性能很着迷，你可以做很多其他的小 rtweaks （参见Performance of jquery 可见）。