Question

这是我的代码，它可以工作，但我想使用循环来清理代码。而不是有这么多行代码。我尝试用[i]替换[0]，但它只会让所有东西都消失在一起。

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);

小提琴：http://jsfiddle.net/0v3L0g6t/

Answer 2

试试这个：

$icons.each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

<强> DEMO

Answer 3

试试这个：

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

function doSetTimeout(i) {
      setTimeout(function() { $icons[i].fadeIn('slow'); }, 1000);
    }

for (var i = 0; i < $icons.length; i++){
      doSetTimeout(i);
}

逐个淡化元素

3 个答案: