jquery - 平滑中心缩放(宽度/高度/顶部/左侧)

Question

因此，我正在将 Flash 小部件转换为 HTML/CSS/JS，但在模拟图像的中心缩放效果时遇到问题。

所以，目前我的 HTML 结构如下:

<div id="outer">
  <img />
</div>

CSS 类似于以下内容:

#outer{
  width: 690px;
  height: 440px;
  position: relative;
}
#outer img{
  width: 690px;
  height: 440px;
  position: absolute;
  top: 0px;
  left: 0px;
}

然后在 jQuery 中，我这样做是为了创建缩放效果:

$image = $("#outer img");
scale = 1.16;
var w = parseInt($image.data("width")); //Set earlier to 690px
var h = parseInt($image.data("height")); //Set earlier to 440px
$image
  .animate({
    width: w*scale,
    height: h*scale,
    left: -(((w*scale) - w)/2),
    top: -(((h*scale) - h)/2)
  }, 5000, "linear");

jFiddle here

我发现的这张特定图像有点难以看清，但(出于某种原因)在我的客户给我的图像中更容易看到它。我看到的是锯齿状/摇晃/紧张的运动，我认为这可能是因为左/上/宽度/高度的十进制值排列得不够好，无法始终保持居中。

有没有更好的方法来解决这个问题，或者可能有一个缓动函数可以产生更好的结果？

如果有什么我可以解决的问题，请告诉我。

谢谢!

编辑:我开始思考是否可以编写一个缓动函数，每当左侧/顶部减少 1 时，宽度/高度就会增加 2，以使其保持在中心位置时间，但我不知道如何在 jQuery 中实现这一点。我尝试摆弄 animate 函数的 step 参数，但我不知道如何强制 left/top 属性增加/减少整数值(整个数字)仅...

Answer 1

你总是可以尝试CSS3动画，但是它有一个很大的问题，IE9不支持它......

但是非常顺利，请在此处查看结果:http://jsfiddle.net/YSJQu/

#outer img {
    (...)
    animation:zoom 5s;
    -moz-animation:zoom 5s; /* Firefox */
    -webkit-animation:zoom 5s; /* Safari and Chrome */
    -o-animation:zoom 5s; /* Opera */
}

@keyframes zoom {
    from { transform:scale(1) }
    to { transform:scale(1.2) }
}
@-moz-keyframes zoom {
    from { -moz-transform:scale(1) }
    to { -moz-transform:scale(1.2) }
}
@-webkit-keyframes zoom {
    from { -webkit-transform:scale(1) }
    to { -webkit-transform:scale(1.2) }
}
@-o-keyframes zoom {
    from { -o-transform:scale(1) }
    to { -o-transform:scale(1.2) }
}