Javascript 动画图像调整大小

Question

我正在尝试使图像具有动画效果并使其变大。我已经改变了它的大小，但我现在正试图让它周围的元素都不会移动。我正在使用 jQuery 来制作动画，出于某种原因，它不会增加边距的每一步。它只在完成后才执行。我以为我正确阅读了 jQuery 文档。到目前为止，这是我的代码:

$(document).ready(function(){
    $(".image").mouseenter(function(){
        $(this).animate({height: "176px", width: "250px"},
            {
            step: function(now, fx) {
                $(this).css("margin-left","-=0.076");
                $(this).css("margin-right","-=0.084");
                $(this).css("margin-bottom","-=0.152");
            }
        });
    });
    $(".image").mouseleave(function(){
        $(this).animate({height: "100px", width: "174px"},
            {
            step: function(now, fx) {
                $(this).css("margin-left","+=0.076");
                $(this).css("margin-right","+=0.084");
                $(this).css("margin-bottom","+=0.152");
            }
        });
    });
});

Answer 1

试试 CSS3 动画:

img{
-webkit-transform:scale(0.6); /*Webkit: Scale down image to 0.6x original size*/
-moz-transform:scale(0.6); /*Mozilla scale version*/
-o-transform:scale(0.6); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

.hovergallery img:hover{
-webkit-transform:scale(0.9); /*Webkit: Scale up image to most of the original size*/
-moz-transform:scale(0.9); /*Mozilla scale version*/
-o-transform:scale(0.9); /*Opera scale version*/
}

以上将在悬停时缩放图像。