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

以上规模将悬停的图像。

Answer 2

没有你的html很难说，但我认为你是这样做的困难的方式。我建议你尽可能多的使用CSS和HTML，然后担心JavaScript。如果您创建一个与图像大小相同的容器，那么您可以使用通常的方法将图片集中在容器中，以便将内容集中到css中，但是可以为其设置动画效果。我也会创建一个函数来处理这些动画，因此更易于使用。

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

$('img').animate({ 
    width: 200, 
    height: 150, 
    top: 0, 
    marginTop: '75px', // heigth/2 
    marginLeft: '100px' // width/2 
});