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

时间:2013-09-21 18:09:24

标签: javascript ruby-on-rails

我试图让每个图像在鼠标悬停时略微增加,然后在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");
    });
});

1 个答案:

答案 0 :(得分:0)

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

下面的代码将在鼠标悬停/退出时添加/减去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