JavaScript 中的延迟动画

Delayed animation in JavaScript

本文关键字：动画 延迟 JavaScript      更新时间：2023-09-26

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

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

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

这应该没问题：

jsBin 演示 

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

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

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