jQuery Script、Animate（）画像のサイズを大きくする

Question

jQuery Scriptを実行しています。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>

私は高さを設定いけない場合、画像が大きすぎますが、これは、スクリプトに問題が発生することがあり、画像だけ左に移動しますが、サイズはdoesntの増加。

Answer 1

）のdivに、あなたはCSSでみてください、コンテナdivの100%であるためにあなたのimgを設定する必要があります。

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>

Answer 2

画像自体ではなく、画像の周りにDIVの高さを設定しているようです。

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

、その後、あなたのjqueryのセレクタは次のようになります：についてあなたは画像にIDを与える方法

あなたは（アニメーションを維持したい場合は

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