jquery image expand/shrink on hover

[gromfy]

I found a great jquery script to have an image expand on hover and shrink to original size on mouseout:
http://stackoverflow.com/questions/883448/is-there-a-way-to-grow-shrink-an-image-on-hover-using-jquery/6619958#6619958

Here is a test fiddle: http://jsfiddle.net/3t7j2/5/

It works well. BUT, if you mouseout quickly and then back on, the image “resting size” expands past its original size. It will keep growing indefinitely. I tried to add stop parameters, but that didn’t help. Any suggestions on how to prevent the growth appreciated….

[gromfy]

I’m not sure if it’s appropriate protocol to bump this. Hopefully no one minds. I feel like I must be missing some simple fix….

[shagzdesign]

[shagzdesign]

Sorry for the double post, just make sure that you change the name of the ul to what you have it named in your code, in my example it’s ul.gallery li, yours will obviously be different and I didn’t make the comment in my code example. My example is a little different from the one you posted because it has options set to center the image, and it gives the image a higher z-index so that it wont push content out of the way when you hover it. But this should work well for your purposes I hope. Let me know if you have any questions.

[Mottie]

Here is a really great tutorial to check over.

But I still modified your demo – basically save the width and height of the image outside of the hover function

var current_h = $('img').height();

var current_w = $('img').width();



$('.resize').hover(



function() {

$(this).stop(true, false).animate({

width: (current_w * 1.3),

height: (current_h * 1.3)

}, 300);

}, function() {

$(this).stop(true, false).animate({

width: current_w + 'px',

height: current_h + 'px'

}, 300);

});

[gromfy]

Thank you both for the help and information. Two very different and interesting approaches.

Here it is implemented in my dev site (the title):
http://dev.aintyomamasblog.com/

[Author]

Posts