Expanding and Shrinking div with jQuery

Question

I need this div to enlarge when hovered and shrink back to default when the mouse is away from the div.

I did this:

$('.box').live('hover', function()
{
    if($(this).height() == 145 && $(this).width() == 100)
    {
        $(this).animate({ height: '+=30px', width: '+=30px' }, 500)
        $('.image img').animate({ height: '+=30px', width: '+=30px' }, 500);
    }
    else
    {
        $(this).animate({ height: '-=30px', width: '-=30px' }, 500)
        $(this).next().find('.image img').animate({ height: '-=30px', width: '-=30px' }, 500);
    }
});

Although, if I keep hovering and moving the mouse away rapidly, it keeps shrinking back down.

Demo: http://jsfiddle.net/avXJV/1/

I need it to stay intact when hovering and mouse out'ing so that none of the elements shrink to a tiny dot or go very large...

Answer 1

All you need to do is use fixed pixel sizes and not +=, -=.. the hover event is being triggered multiple times and those values are additive.

Every additional time you hover over it, the size is never original and the else clause runs.

Answer 2

Maybe this is what you're looking for. The key is to use .stop() before running the next step of the animation so it doesn't fire repeatedly.

Answer 3

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/