时间戳

首页 > 解决方案 > 使用 js animate 缩放背景图像 - 得到抖动的图像

javascript - 使用 js animate 缩放背景图像 - 得到抖动的图像

问题描述

我有带有背景图像的 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/

标签： javascriptcssjquery-animateshake

解决方案

为初始状态设置背景大小，为动画添加缓动。这就是我所取得的。

   $('body').on('click', '#container', function() {

        $("#container").animate({
            "background-size": 100 + "%"
        }, {duration: 9000,
      easing: "linear"});


    });
    #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;

        background-size: 10%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

推荐阅读