イメージをリサイズするときにスムーズなアニメーションが必要な場合javascript

Question

2つのイメージがコンテナ内にあります。画像はアップロードされるので、私はそのサイズを事前に知らない。私はこの機能を使用して、画像をコンテナに合わせてサイズを変更しました。サイズ変更は正常に機能しますが、アニメーションは不安定です。私はそれがより滑らかに見えるようにする方法があるのだろうかと思っていました。ここで

$(window).load(function() { 
    window.SurveyCreator = new SurveyCreator(); 
    setTimeout(function() { 
    equalheight('.options-container'); 
    }, 1000); 
}); 

$(window).resize(function() { 
    equalheight('.options-container'); 
}); 

equalheight = function(container) { 
    var currentTallest = 0, 
     currentRowStart = 0, 
     rowDivs = new Array(), 
     $el, 
     topPosition = 0; 

    $(container).each(function() { 
    $el = $(this); 
    $($el).height('auto') 
    topPostion = $el.position().top; 

    if (currentRowStart != topPostion) { 
     for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
     rowDivs[currentDiv].height(currentTallest); 
     } 
     rowDivs.length = 0; // empty the array 
     currentRowStart = topPostion; 
     currentTallest = $el.height(); 
     rowDivs.push($el); 
    } else { 
     rowDivs.push($el); 
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 
    } 

    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
     rowDivs[currentDiv].height(currentTallest); 
    } 
    }); 
} 

はHTMLです：

<div id="options-box" class="options-box"> 
    <div class="options-container"> 
    <img class="question-option" id="question-option-a"> 
    </div> 
    <div class="options-container"> 
    <img class="question-option" id="question-option-b"> 
    </div> 
</div> 

ここでCSSです：コンテナのCSSへの移行を追加

.question-option { 
    width: 100%; 
} 

.options-container { 
    width: 48%; 
    float: left; 
    background-color: #F2F1F5; 
    padding: 30px; 
    text-align: center; 
    margin: 0 1%; 
    border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
} 

.options-box { 
    margin-top: 25px; 
} 

Answer 1

試してみます。

.options-container { 
    transition: 1s; 
} 

あなたにも、「移行」のブラウザの特定のバージョンを追加することもできます。また、

.options-container { 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -ms-transition: 1s; 
} 

を、高さのみ書き込み「高さ1」の代わりに「1」をアニメーション化します。

Answer 2

これをリファクタリングして.animate（）を使用すると考えましたか？あなたがそれをするならば、あなたはそれをより滑らかにするVelocityJSを利用することができます。