Javascript动画图像调整大小

我试图使一个图像动画，使它更大。我已经让它改变大小，但我现在正试图使它，使周围的元素没有得到移动，以及。我使用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");
            }
        });
    });
});

---

没有你的html很难说，但我认为你做的很难。我建议您尽可能多地使用css和html，然后再考虑javascript。如果您创建了一个与图像大小相同的容器，那么您可以使用css中的常用方法将图片居中放置在容器内，但您需要设置动画。我还将创建一个函数来处理这些动画，以便更易于使用

检查这里的简单演示：（包括可爱的小猫）

尝试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*/
}

---

上面的内容将缩放悬停时的图像。

使用CSS3时，这似乎实际上会更容易…好的，我该怎么做呢？我知道CSS只是不太像那样复杂的东西。我想看看：好的，CSS3的规模更容易使用，给了我确切的效果，我想要的！谢谢你，康纳！我会把它设为答案，但你没有把它设为答案……我试图避开图像周围的方框。当鼠标悬停在图像上方时，它将开始变小，变大，然后在鼠标离开图像时再次缩小。@legobear154只需删除包装器div上的边框。@legobear154这是您正在考虑使用的吗？哦，是的，对不起。好久没播了。再次非常感谢您的代码！

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*/
}