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.