jQuery Script, Animate() 增加图像的大小答案

【问题标题】：jQuery Script, Animate() increase the size of an imagejQuery Script, Animate() 增加图像的大小
【发布时间】：2016-07-05 21:30:12
【问题描述】：

我正在运行一个 jQuery 脚本，Animate()...我想在按下按钮时增加图像的大小，我该怎么做？

$(document).ready(function() {
  $("button").click(function() {
    $("div").animate({
      left: '+=250px',
      height: '+=20px',
      width: '+=20px'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Start Animation</button>
<div style="position:absolute;">
  <img src="Resources/pez.jpg" height="20" />
</div>

如果我不设置高度，图像太大，但这可能会导致脚本出现问题，图像只会向左移动，但不会增加大小。

【问题讨论】：

标签： jquery image jquery-animate image-size

【解决方案1】：

如果你想保留 div 上的 animate()，你需要将你的 img 设置为容器 div 的 100%，尝试使用 CSS：

div img {
  width: 100%;
  height: 100%;
}

检查这个例子：

$(document).ready(function() {
  $("button").click(function() {
    $("div").animate({
      left: '+=25px',
      height: '+=20px',
      width: '+=20px'
    });
  });
});

div img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Start Animation</button>
<div style="position:absolute;">
  <img src="http://lorempixel.com/200/200" />
</div>

【讨论】：

【解决方案2】：

看起来您正在设置图像周围 DIV 的高度，而不是图像本身。

你给图片一个id怎么样：

<img src="Resources/pez.jpg" id="pez" height="20" />

然后您的 jquery 选择器将如下所示：

$("#pez").animate.....

【讨论】：