How do I sequentially load images on mouseover with Jquery

Question

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.

The Jquery

$(function() {
$(".faded").hide()    
$(".faded").each(function(i) {
    $(this).delay(i * 100).fadeIn(500);
});
});

Example HTML

<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div>
.....

An example of this in action can be viewed here http://comill.com/animation/

This got me thinking that it would be quite nice to create a rollover or hover script that loads images in a similar way.

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.

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.

Answer 1

use a .hover() on the green disk element

for your example, give the following code a spin

$(document).ready(function(){
    var faded = $(".faded");
    faded.hide();
    $('#midbut').hover(function(){
        // mouseenter
        faded.each(function(i) {
            $(this).delay(i * 100).fadeIn(500);
        });
    }, function(){
        // mouseleave
        faded.fadeOut(500);
    });
});

also u shouldn't be hiding the elements with jquery if you can do it with css on the page init