jQueryのアニメーション中に子どもにフィットする親を縮小する

Question

親が位置する親を絶対の位置に配置した幅が100％の画像です。

jqueryを画像のアスペクト比と同じにして、親の初期高さを設定しました。問題は、ページ内の別のアニメーションがdivを縮小することです。 収縮中私は親に子供のイメージを合わせたいと思います。

アニメーション中に親のアスペクト比を維持するにはどうすればよいですか？ （おそらくwindow resize listenerのようなものでしょうか？）この縮小はサンプルアニメーションです。私は実際には複雑なアニメーションを持っているので、私はこのサンプルターゲット200pxの幅ではなく、あらゆる瞬間に一般的なソリューションを探しています。

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

[OK]をクリックします。私は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

あなたは、新しいheightを取得するには、この要因によるheightを掛け、その後、width（すなわちnewWidth/width）のスケーリング係数を格納する変数を使用することができます。

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