Question

我试图让每个图像在鼠标悬停时略微增加，然后在jquery砌体应用上减少mouseout。但是，每个图像的大小不同。如何使用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");
    });
});

Fiddle Demo

在mouseover jquery砌体上调整图像大小

1 个答案: