javascript - jquery スライド ダウン効果 - 内部コンテンツを移動せずに

Question

www.bbc.co.ukの「詳細」リンクに似た単純なスライドアップ/ダウン効果を実現しようとしています

内容物が上下に動くのではなく、画面が引っ張られているように見えます。

jquery slideUp slideDown を使用してもこれは達成されません。代わりに、div 全体が上下に移動するため、テキストが移動したように見えます。

jqueryを使用して同様の効果を達成するにはどうすればよいですか?

Answer 1

slideUp/slideDown高さを使用する場合は、アニメーション時に上部の位置を使用します。したがって、手動でアニメーション化することをお勧めします。

// Initial variables
var panel = $('#panel');
var panelHeight = panel.height();

// Set the height to 0
panel.height('0px');

// Animate it to its initial size
$('a').click(function() {
    $('#panel').animate({'height' : panelHeight});
});

...そしてもちろんCSS:

#panel {
    overflow: hidden;
    height: 300px; /* or whatever */
}

フィドル: http://jsfiddle.net/3fsQr/