使用 jquery 缩放居中图像

Question

我有一个居中的图像，我想用 jquery 缩放它。问题是它首先缩放并定位在第二步。

.outer {
   width:500px;
   height:500px;
   background: #f5f5f5;
   text-align: center;
}
#inner {
    display: none;
}

http://jsfiddle.net/omudeaxd/

Answer 1

使用animate()代替show()：

只需将您的 js 替换为：

$( document ).ready (function () {
    $('#inner').css({'height':0,'width':0})
    $('#inner').animate({height:300+"px",width:300+"px"},1900)
});

check in jsfiddle

Answer 2

为什么不为此使用关键帧？看起来不错，还有硬件加速！

http://jsfiddle.net/BramVanroy/omudeaxd/2/

#inner {
    width: 0;
    height: 0;
    animation: zoom 1900ms;
}
@keyframes zoom {
  0% {
      width: 0;
      height: 0;
    }
  100% {
      width: 300px;
      height: 300px;
  }
}

使用 jquery 缩放居中图像

Scale centered image with jquery

jquery

show