在jQuery動畫寬度中收縮父母以適應孩子

Question

我有一個親戚父親定位絕對定位在它裏面的圖像有寬度：100％。

我設置父級的初始高度使用jquery等於圖像的縱橫比。問題在於頁面中的另一個動畫縮小了div。 期間收縮我想讓父母適合孩子的形象。

如何在動畫過程中保持父寬高比？ （也許像窗口調整大小監聽器？）請注意，這種縮小是一個示例動畫。我實際上有一個複雜的動畫，所以我正在尋找一個通用的解決方案，而不是針對此示例目標200像素寬度。

$(document).ready(function(){ 
 
\t var width=$("#wrapper").width(); 
 
\t $("#wrapper").height(width*0.33); 
 
    
 
    
 
    $("#shrink").click(function(){ 
 
    $("#wrapper").animate({"width":"200px"},3000) 
 
    }) 
 
})

#wrapper{ 
 
    position:relative; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    border:1px solid #444444; 
 
} 
 

 
.child{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    } 
 

 
#shrink{cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a id="shrink">Click here to shrink</a> 
 
<br><br> 
 
<div id="wrapper"> 
 
    <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
</div>

Answer 1

確定。我發現使用jQuery 步驟函數的一般解決方案。 step是在動畫的每一步觸發的jQuery動畫中的一個選項。所以我可以寫一個調整大小的函數並在每一步調用它。

$(document).ready(function(){ 
 
\t resizeWrapper(); 
 
    
 
    
 
    $("#shrink").click(function(){ 
 
    $("#wrapper").animate({"width":"200px"},{duration:3000,step:function(){resizeWrapper()}}) 
 
    }) 
 
}) 
 

 
function resizeWrapper(){ 
 
\t var width=$("#wrapper").width(); 
 
\t $("#wrapper").height(width*0.33); 
 

 
}

#wrapper{ 
 
    position:relative; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    border:1px solid #444444; 
 
} 
 

 
.child{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    } 
 

 
#shrink{cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a id="shrink">Click here to shrink</a> 
 
<br><br> 
 
<div id="wrapper"> 
 
    <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
</div>

我還發現detect resize但它沒有爲我工作。

Answer 2

您可以使用一個變量來存儲width（即newWidth/width）的比例係數，然後乘以此比例，將height來獲得新的height。

$(document).ready(function() { 
 
    var width = $("#wrapper").width(); 
 
    $("#wrapper").height(width * 0.33); 
 

 
    var newWidth = 200; 
 
    var scalingFactor = newWidth/width; 
 
    var height = $("#wrapper").height(); 
 

 
    $("#shrink").click(function() { 
 
    $("#wrapper").animate({ 
 
     "width": newWidth + "px", 
 
     "height" : height * scalingFactor + "px" 
 
    }, 3000) 
 
    }) 
 
})

#wrapper { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    border: 1px solid #444444; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
#shrink { 
 
    cursor: pointer 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="shrink">Click here to shrink</a> 
 
<br> 
 
<br> 
 
<div id="wrapper"> 
 
    <img class="child" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
</div>