jQuery 脚本，Animate() 增加图像的大小

Question

我是运行一个 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>

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

Answer 1

您似乎是在设置图像周围 DIV 的高度，而不是图像本身。

你给图片一个id怎么样：

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

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

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

Answer 2

如果您想在 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>

jQuery 脚本，Animate() 增加图像的大小

jQuery Script, Animate() increase the size of an image

jquery

image

image-size

jquery-animate