javascript - 在鼠标悬停 jquery masonry 上调整图像大小

Question

我试图让每个图像在鼠标悬停时稍微增加大小，然后在 jquery masonry 应用程序上减小鼠标悬停。但是，每个图像的大小都不同。如何使用 javascript 应用此效果，以便每个图像按比例放大并恢复正常？

---

$(document).ready(function(){
    $(".box").mouseover(function(){
        $(this).animate({height:"105%",width:"105%"},"fast");
    });
    $(".box").mouseout(function(){
        $(this).animate({height:"100%",width:"100%"},"fast");
    });
});

Answer 1

在高度/宽度设置中使用加法/减法修饰符

下面的代码将在鼠标悬停/移出时添加/减去 20 个像素

$(document).ready(function(){
    $(".box").mouseover(function(){
        $(this).animate({height:"+=20",width:"+=20"},"fast");
    });
    $(".box").mouseout(function(){
        $(this).animate({height:"-=20",width:"-=20"},"fast");
    });
});

小提琴演示