jQuery-悬停时将图片高度和宽度扩展20％ [英] Jquery - Expand image height and width 20% on hover

问题描述

整个晚上-动态访问图像的高度和宽度的最佳方法是什么.
我想在周围的div悬停时将图像的宽度和高度添加20％并进行动画处理，我想我需要使用"this"，但不确定如何访问图像.

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.

干杯保罗

推荐答案

您可以使用 .height() 和 .width() ，并带有函数参数:

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; });
});​

您可以在此处尝试，如果您想要平滑的动画，则可以存储初始高度/宽度和 .animate() ，如下所示:

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 });
});​

您可以在此处尝试，请确保在，而不是 $(document).ready()，因为可能尚未加载尺寸.

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.

这篇关于jQuery-悬停时将图片高度和宽度扩展20％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！