Question

我希望用更少的代码编写以下代码。基本上，我想学习更多面向对象的方法来编写一个循环，它将遍历#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" width="83" height="101" class="g1" /></div>
    <div id="g2" class="g"><img src="_img/g2.png" width="99" height="58" class="g2" /></div>
    <div id="g3" class="g"><img src="_img/g3.png" width="96" height="58" class="g3" /></div>
    <div id="g4" class="g"><img src="_img/g4.png" width="78" height="86" class="g4" /></div>
    <div id="g5" class="g"><img src="_img/g5.png" width="140" height="99" class="g5" /></div>
    <div id="g6" class="g"><img src="_img/g6.png" width="99" height="45" class="g6" /></div>
    <div id="g7" class="g"><img src="_img/g7.png" width="97" height="60" class="g7" /></div>
    <div id="g8" class="g"><img src="_img/g8.png" width="83" height="102" class="g8" /></div>
</div>

Answer 1

未经测试，但试试这个：

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

jquery动画延迟

1 个答案: