Jquery - 悬停时将图像高度和宽度扩展 20%

Question

晚上好 - 动态访问图像高度和宽度的最佳方法是什么。
我想在图像宽度和高度上添加 20%，并在周围的 div 悬停时设置动画，我想我需要使用“this”，但不确定如何访问图像。

非常感谢您的帮助。

干杯保罗

Answer 1

您可以使用 .height() 执行类似的操作和 .width()带函数参数:

$("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 ，如果您想要平滑的动画，您可以存储初始高度/宽度和 .animate() ，像这样:

$("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 ，请务必在 $(window).load() 中运行这些选项之一，并且不 $(document).ready() ，因为尺寸可能尚未加载。