Fade in links in sequence with jquery?

Question

I'm trying to figure out how to fade in my links one at a time. I could fade them all in, but I just want the aesthetics of one at a time. I'd even love to have them all slide out one at a time from one another, but I understand that is difficult. At least for me to go about writing. This is just a excerpt from my code handling the navigation.

http://jsfiddle.net/dpzPs/

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

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

    });
});

score 2 · Answer 1 · answered Apr 26 '13 at 05:24

2

The .delay() function creates a delay before the next animation on the same element. Try instead using 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);
    });
});

Demo: http://jsfiddle.net/dpzPs/1/

Note that if you give your ul an id you can simplify your JS by saying:

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

...instead of having to list out all of the li elements' ids.

answered Apr 26 '13 at 05:24

nnnnnn

147,572
30
200
241

I thought I could use each, I tried a couple versions but figured it didn't work that way. Thanks a lot! – WASasquatch Apr 26 '13 at 05:33
I think `setInterval()` is better than `setTimeout()` for this kind of animation. [Here’s why](http://stackoverflow.com/a/731625/704015). – Jezen Thomas Apr 26 '13 at 05:42
@Mysteryos - my fiddle works fine for me, both in Chrome on my laptop and in Miren on my phone. – nnnnnn Apr 26 '13 at 12:54
@JezenThomas - I didn't find that link entirely convincing. I find that using setInterval almost always results in messier code, and historically some browsers didn't handle it well if you changed to another browser tab and later returned. – nnnnnn Apr 26 '13 at 12:59

score 2 · Accepted Answer · answered Apr 26 '13 at 05:29

2

you could also do:

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

Demo: jsFiddle

answered Apr 26 '13 at 05:29

Sudhir Bastakoti

99,167
15
158
162

That is pretty efficient. I would have never got that short code on my own. Lol – WASasquatch Apr 26 '13 at 05:46
Programming isn’t a golf competition. This solution is convoluted. – Jezen Thomas Apr 26 '13 at 05:47
It most definitely is, however it is well formed and works great, saves up space too. – WASasquatch Apr 26 '13 at 07:52

Jezen Thomas · Answer 3 · 2013-04-26T05:40:46.783

Here's a simple solution.

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

Here's a demo.

Fade in links in sequence with jquery?

3 Answers3