jquery - 使用jquery按顺序淡入链接？

Question

我试图弄清楚如何一次淡入我的链接。我可以将它们全部淡化，但我只想要一次一个的美学。我什至想让它们一个一个地从另一个滑出，但我知道这很困难。至少让我开始写作。这只是我处理导航的代码的摘录。

http://jsfiddle.net/dpzPs/

$(document).read(function () {
    $.each(['#href1',
            '#href2',
            '#href3',
            '#href4',
            '#href5'], function (i, l) {

        $(l).fadeTo('slow', 1.0).delay(200);

    });
});

Answer 1

该函数在同一元素.delay()的下一个动画之前创建一个延迟。尝试使用：setTimeout()

$(document).ready(function () { // note: you had a typo "read" instead of "ready"
    $.each(['#href1',
            '#href2',
            '#href3',
            '#href4',
            '#href5'], function (i, l) {

        setTimeout(function(){
            $(l).fadeTo('slow', 1.0);
        }, i * 500);
    });
});

演示：http: //jsfiddle.net/dpzPs/1/

请注意，如果您提供ul一个 id，您可以通过以下方式简化您的 JS：

$("#idOfUL li").each(...

...而不必列出所有 li 元素的 id。

Answer 2

你也可以这样做：

(function fadeLink($){
    $.eq(0).fadeTo("slow", 1, function(){
        ($=$.slice(1)).length && fadeLink($);
    });
})($('ul > li'));

演示：jsFiddle

Answer 3

这是一个简单的解决方案。

var i = 0, // a counter
    $ul = $('ul'), // save a reference to your ul
    l = $('li', $ul).length, // count the list items
    timer = setInterval(function(){
        if (i === l) clearInterval(timer); // Stop the timer if we've faded all elements in
        $('li', $ul).eq(i).animate({opacity:1}, 160);
        i++; // increment counter
}, 200); // run the function in the setInterval once every 200ms

这是一个演示。