DedalusNine DedalusNine - 5 months ago 24
jQuery Question

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

Im running a jQuery Script, Animate()...I want to increase the size of the image when I press the button, how can I do this?



$(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>





if I dont set the height, the image is too big, but this may cause a problem with the script, the image only move to the left, but doesnt increase in size.

Answer

If you want to keep the animate() on the div, you will need to set your img to be 100% of the container div, try with CSS:

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

Check this example:

$(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>