jquery动画延迟

Posted 2023-05-08

【中文标题】jquery动画延迟

【英文标题】：jquery animate delay

【发布时间】：2012-05-10 13:40:07

【问题描述】：

我希望用更少的代码编写以下代码。基本上，我想学习一种更面向对象的方法来编写一个循环，该循环将遍历#canvas，找到每个孩子，将其淡入，然后在短暂延迟后继续下一个。

$(document).ready(function()
    $(".g").find('img').hide();
    do_anim();
);
function do_anim()
    $('#g1').find('img').fadeIn(300);
    $('#g2').find('img').delay(600).fadeIn(300);
    $('#g3').find('img').delay(1200).fadeIn(300);
    $('#g4').find('img').delay(1800).fadeIn(300);
    $('#g5').find('img').delay(2400).fadeIn(300);
    $('#g6').find('img').delay(3000).fadeIn(300);
    $('#g7').find('img').delay(3600).fadeIn(300);
    $('#g8').find('img').delay(4200).fadeIn(300);
;

我的 html 结构是：

<div id="canvas">
<div id="g1" class="g"><img src="_img/g1.png"   class="g1" /></div>
    <div id="g2" class="g"><img src="_img/g2.png"   class="g2" /></div>
    <div id="g3" class="g"><img src="_img/g3.png"   class="g3" /></div>
    <div id="g4" class="g"><img src="_img/g4.png"   class="g4" /></div>
    <div id="g5" class="g"><img src="_img/g5.png"   class="g5" /></div>
    <div id="g6" class="g"><img src="_img/g6.png"   class="g6" /></div>
    <div id="g7" class="g"><img src="_img/g7.png"   class="g7" /></div>
    <div id="g8" class="g"><img src="_img/g8.png"   class="g8" /></div>
</div>

【问题讨论】：

关于优化当前工作代码的问题，您可以考虑codereview.stackexchange.com

【参考方案1】：

未测试，但试试这个：

$(document).ready(function()
    $(".g img").hide().each(function(i)
        $(this).delay(i*600).fadeIn(300);
    );
);

【讨论】：

我也在考虑类似的事情。这应该有效。

谢谢。自从我发布这篇文章以来，我在 jquery 中已经走了很长一段路。但我想感谢你的帮助！我将挖掘我的旧代码并展示我的解决方案。这个社区很棒！