2016-10-05 14 views
1

の滑らかに変化する高さIは、ラッパー-DIVにネストされたdiv要素の束を持ってはJQuery/CSS - ラッピング - DIV

<div id="wrapper"> 
    <div id="inner_1"></div> 
    <div id="inner_2"></div> 
    <div id="inner_3"></div> 
</div> 

すべての内部DIVは、異なる高さを有しています。私は、内部DIVをfadeIn/fadeOut()で表示/非表示するので、ラッパーの高さが小さい(inner_1)から高い(inner_2)にジャンプして、表示されているように内側DIVをラップします。

ラッパーDIVの高さをアニメーション化する簡単な方法があるので、内部DIV高さに合わせて滑らかにスライドしますか?ここ

例へのリンク: https://jsfiddle.net/a3wvxcuq/#

答えて

2

ちょうど.show().hide()方法にミリ秒単位の数値を渡すとのdivがスムーズに新しい次元に移行します。

Demo

だからそれはちょうど正しい方向にあなたを指しています。

コードはキャンバスであり、あなたはアーティストある;)

ので、派手に見える別の方法:私たちはこっちに勝者を持っているようDemo 2

Annd、それが見えます。 Demo 3

+0

また、文字列を渡すこともできます: 'slow'、 'normal'、 'fast' –

+0

@timenomadできることを確かめてください。 –

+2

OPが怠けている場合のために:D –

関連する問題