Question

我正试图弄清楚如何一次淡出我的链接。我可以将它们全部淡化，但我只想要一次一个美学。我甚至喜欢让它们一次一个地滑出一个，但我明白这很难。至少对我来说是写作。这只是我处理导航的代码的摘录。

$(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

这里是demo。

使用jquery按顺序淡入链接？

3 个答案: