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.

mreq · Accepted Answer · 2011-11-21 18:19:33Z

2

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

answered Nov 21, 2011 at 18:19

mreq

6,5524 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob Over a year ago

That's perfect! Really appreciate that, also thanks for the pointer re hiding images with jquery. I was aware of this and had originally used CSS, I can't remember exactly why I used hide in the script instead but there was reasoning behind it at the time I originally used it. Thanks again.

mreq Over a year ago

glad it help you. you can accept the answer by ticking the tick icon

Collectives™ on Stack Overflow

How do I sequentially load images on mouseover with Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest