title: How do I sequentially load images on mouseover with Jquery
body: <p>I recently used a nice little jquery script that loads images with a given class sequentially and fades them in one by one as a page loads.</p>
  
  <p><strong>The Jquery</strong></p>
  
  <pre><code>$(function() {
  $(".faded").hide()    
  $(".faded").each(function(i) {
      $(this).delay(i * 100).fadeIn(500);
  });
  });
  </code></pre>
  
  <p><strong>Example HTML</strong></p>
  
  <pre><code>&lt;div class="faded"&gt;&lt;img class="someclass" src="images/example1.jpg" /&gt;&lt;/div&gt;
  &lt;div class="faded"&gt;&lt;img class="someclass" src="images/example1.jpg" /&gt;&lt;/div&gt;
  &lt;div class="faded"&gt;&lt;img class="someclass" src="images/example1.jpg" /&gt;&lt;/div&gt;
  &lt;div class="faded"&gt;&lt;img class="someclass" src="images/example1.jpg" /&gt;&lt;/div&gt;
  .....
  </code></pre>
  
  <p>An example of this in action can be viewed here <a href="http://comill.com/animation/" rel="nofollow">http://comill.com/animation/</a></p>
  
  <p>This got me thinking that it would be quite nice to create a rollover or hover script that loads images in a similar way.</p>
  
  <p>For example, in the demo link given above only the green disc would be visible on the page and when a user hovers over this disc the petals would fade in one by one. Ideally the petals would then all fade out at once on mouseout.</p>
  
  <p>I have spent a while researching this and feel that it should be fairly simple to achieve, however so far I have not found a solution while searching through Google so if anyone can provide a solution any help would be greatly appreciated.</p>