title: jquery animate delay
body: <p>I'm looking to write the following with less code. Basically, I want to learn a more Object Oriented way to write a loop that will iterate through #canvas, finding each child, fade it in, then move on to the next one after a short delay.  </p>
  
  <pre><code>$(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);
  };
  </code></pre>
  
  <p>MY HTML Structure is:</p>
  
  <pre><code>&lt;div id="canvas"&gt;
  &lt;div id="g1" class="g"&gt;&lt;img src="_img/g1.png" width="83" height="101" class="g1" /&gt;&lt;/div&gt;
      &lt;div id="g2" class="g"&gt;&lt;img src="_img/g2.png" width="99" height="58" class="g2" /&gt;&lt;/div&gt;
      &lt;div id="g3" class="g"&gt;&lt;img src="_img/g3.png" width="96" height="58" class="g3" /&gt;&lt;/div&gt;
      &lt;div id="g4" class="g"&gt;&lt;img src="_img/g4.png" width="78" height="86" class="g4" /&gt;&lt;/div&gt;
      &lt;div id="g5" class="g"&gt;&lt;img src="_img/g5.png" width="140" height="99" class="g5" /&gt;&lt;/div&gt;
      &lt;div id="g6" class="g"&gt;&lt;img src="_img/g6.png" width="99" height="45" class="g6" /&gt;&lt;/div&gt;
      &lt;div id="g7" class="g"&gt;&lt;img src="_img/g7.png" width="97" height="60" class="g7" /&gt;&lt;/div&gt;
      &lt;div id="g8" class="g"&gt;&lt;img src="_img/g8.png" width="83" height="102" class="g8" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>