Question

我想延迟一个在li a-element中滑动图像的动画。我有这个想法，我可以通过计数器（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 demo

$('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);
});

JavaScript中的延迟动画

2 个答案:

jsBin demo