Delayed animation in JavaScript

Question

I want to delay an animation that slides an image in a li a-element. I had the idea, that I could go through every li element with a counter (i) and set a timeout with the animation to do: 1000 + i * 50

Unfortunately only the last li-element will be animated. Why is that?

li = $('nav ul li').get();
lic = li.length;

$('nav ul li a .icon').hide();

t = [];
for (i = 0; i < li.length; i++) {
    var obj = $('nav ul li')[i];

    t[i] = setTimeout(function() {
        $(obj).children('a').children('.icon').slideDown();
    }, 1000 + i * 50);

    delete obj;
}

Why are you wrapping an already jQuery object in another jQuery constructor? — Tschallacka
– Tschallacka, Commented Jun 27, 2012 at 21:23
To clarify things, delete obj will not do anything because delete will only remove properties, not variables. — Derek 朕會功夫
– Derek 朕會功夫, Commented Jun 27, 2012 at 21:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

This should be fine:

jsBin demo

$('nav ul li a .icon').hide();

$('nav ul li').each(function( i ){       
    $(this).find('.icon').delay(i*300).slideDown();    
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 27, 2012 at 21:24

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Derek 朕會功夫 Over a year ago

@RokoC.Buljan - $(this).find(".icon") is faster.

Ramesh · Accepted Answer · 2012-06-27 21:29:38Z

0

Try this, and this is no a full code, and un-tested. Please borrow the logic from this..

$('nav ul li').each(function {
    $(this).find("a>.icon").hide();
    t[i] = setTimeout(function() {
        $(this).find("a>.icon").slideDown();
    }, 1000 + i * 50);
});

answered Jun 27, 2012 at 21:29

Ramesh

4063 silver badges9 bronze badges

Collectives™ on Stack Overflow

Delayed animation in JavaScript

2 Answers 2

jsBin demo

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related