javascript - 使用 js animate 缩放背景图像 - 得到摇晃的图像

Question

我有一个带有背景图片的 DIV 容器。

当我用 JS animate scale 制作动画时 - 我得到了摇晃效果。怎样才能顺畅？

$('body').on('click', '#container', function() {
  $("#container").animate({
   "background-size": 1000 + "px"
  }, 4000);
});

#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

这是 JSFiddle: https://jsfiddle.net/rn6kwup0/

Answer 1

这样的事情可能会奏效。它使用 css3 转换来平滑地缩放事物:

https://jsfiddle.net/21j3hbae/

    .container {
        width: 500px;
        height: 300px;
        margin-top: 100px;
        margin-left: 100px;
        background-color: #eeeeee;


    }

    .container .inner-image {
      width: inherit;
      height: inherit;
      background-repeat: no-repeat;
        background-position: center;
      background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
      transform: scale(0.5);
      transition: all 8s ease;
      background-size: 100% auto;
    }

    .container.animate .inner-image {
      transform: scale(2);
    }