jquery动画延迟

我希望用更少的代码编写以下内容。基本上，我想学习一种更面向对象的方法来编写一个循环，该循环将在画布上迭代，找到每个子对象，淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入

$(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>

---

未测试，但请尝试以下操作：

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

---

关于优化当前工作代码的问题，您可能会认为我在思考一些相同的问题。这应该行，谢谢。自从我发布这篇文章以来，我在jquery方面已经走了很长一段路。但是我想感谢你的帮助！我将挖掘我的旧代码并展示我的解决方案。这个社区太棒了！