JQueryによるページサイズ変更.fadeIn、.fadeOutは悪く見えます

Question

私は異なるdiv要素をページ上でクリックされたリンクに基づいてフェードイン/フェードアウトさせようとしています。それはうまく動作しますが、1つの要素がフェードアウトし、別の要素が同時にフェードインすると、ページサイズが大幅に変更され、 "glitchy"に見えます。

私はposition:absoluteを高さで試してみたいと思いますが、私はまた持っていたいと思うのですが、遅れを取るのは基本的に同じ効果があります。そのため、ユーザーはすべてのdivを一度にロードするオプションがあり、重なり合うことになります。

私は滑らかに見える他のアニメーションを試すことができますが、私はフェードが好きです。

誰もこの問題を回避する経験がありましたか？ページのサイズ変更を遅らせる方法はありますか？

Answer 1

私は同じ問題を抱えていました。私がその周りに持っている方法は、outerHeight（）JQuery関数を使用して親divの現在の高さを取得し、子divのfadeOut関数を呼び出す前にdivの最小高さを現在の高さに設定することでした。

HTML

<div id="mydiv1"> 
    <div id="mydiv2"> 
     <!-- Elements to faded in and out --> 
    </div> 
</div> 

jQueryの

var current_height = $('#mydiv1').outerHeight(); 
$("#mydiv1").css("min-height", current_height); 

$('#mydiv2').fadeOut('slow', function() 
{ 
    // Animation complete. 
}); 

これは、私が知っている古い質問ですが、私はそれが道ここが発見した誰にも役立ちます願っています。