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设置为容器100%的{{1}}，尝试使用CSS：

div

检查此示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery Script，Animate（）增加了图像的大小

2 个答案: