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

时间:2016-07-05 21:30:13

标签: jquery image jquery-animate image-size

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

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

2 个答案:

答案 0 :(得分:0)

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

你给图像一个id:

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

然后你的jquery选择器看起来像:

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

答案 1 :(得分:0)

如果你想在div上保留animate(),你需要将img设置为容器100%的{​​{1}},尝试使用CSS:

div

检查此示例:

&#13;
&#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;
&#13;
&#13;