Jquery - Expand image height and width 20% on hover

Question

Evening all - Whats the best way to access an image's height and width dynamically .
I want to add 20% to an images width and height and animate when the surrounding div is hovered, I guess I need to use 'this', but not sure how to access the image.

Any help greatfully received.

Cheers Paul

Answer 1

You could do something like this, using .height() and .width() with function arguments:

$("img").hover(function() {
    $(this).height(function(i, h) { return h * 1.2; })
           .width(function(i, w) { return w * 1.2; });
}, function() {
    $(this).height(function(i, h) { return h / 1.2; })
           .width(function(i, w) { return w / 1.2; });
});​

You can give it a try here, if you wanted a smooth animation you could store the initial height/width and .animate(), like this:

$("img").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height*1.2, 
                             width: $.data(this,'size').width*1.2 });
}, function() {
    $(this).stop().animate({ height: $.data(this,'size').height, 
                             width: $.data(this,'size').width });
});​

You can give it a try here, be sure to run either of these options in $(window).load(), and not $(document).ready(), since the dimensions may not be loaded yet.