javascript - JavaScript 中的延迟动画

Question

我想延迟在 li a 元素中滑动图像的动画。我的想法是，我可以使用计数器 (i) 遍历每个 li 元素，并设置动画的超时时间：1000 + i * 50

不幸的是，只有最后一个 li 元素会被动画化。这是为什么？

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

Answer 1

这应该没问题：

jsBin 演示

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

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

Answer 2

试试这个，这不是一个完整的代码，并且未经测试。请借用这个逻辑..

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