jQuery腳本，動畫（）增加圖像的大小

Question

我運行一個jQuery腳本，動畫（）...我想增加圖像的大小，當我按下按鈕，我該怎麼做？

$(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，你需要設置你的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>

Answer 2

看起來你正在設置圖像周圍DIV的高度，而不是圖像本身。

你怎麼樣給圖像的ID：

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

，然後你的jQuery選擇看起來像：

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