javascript - 一个接一个地淡入元素

Question

这是我的代码，它可以工作，但我想使用循环来清理代码。而不是有那么多行代码。我尝试用 [i] 替换 [0]，但它只会使所有内容一起淡入。

JSFIDDLE

var $icons = $('#header li').hide();

for(var i = 0; i < $icons.length; i++) {
    $($icons[0]).fadeIn(function() {
        $($icons[1]).fadeIn(function() {
            $($icons[2]).fadeIn(function() {
                $($icons[3]).fadeIn(function() {
                    $($icons[4]).fadeIn(function() {
                        $($icons[5]).fadeIn(function() {
                            $($icons[6]).fadeIn(function() {
                                $($icons[7]).fadeIn(function() {
                                    $($icons[8]).fadeIn(function() {
                                        $($icons[9]).fadeIn(function() {

                                        });
                                    });
                                });
                            }); 
                        });
                    });
                });
            }); 
        });
    });
}

Answer 1

您可以使用递归:

function FadeMe($array, index) {
    if (index >= $array.length) return;

    $array.eq(index).fadeIn(function() {
        if (index + 1 < $array.length) {
            FadeMe($array, index + 1);
        }
    });
}

var $icons = $('#header li').hide();
FadeMe($icons, 0);

fiddle :http://jsfiddle.net/0v3L0g6t/