javascriptで要素を展開すると、最適な方法ですか？

Question

私はウェブページ上の要素を拡張するために、javascriptやjqueryを使用してdivなどの不自由な方法で遭遇しました。パフォーマンスなどを見ているときに、これを実行する最も簡単で簡単な方法は何かを知りたいと思います。

私の例では、私が構築している新しいサイトと、フロントページのニュースセクションがあります。ニュースアイテムは特定の高さ、たとえば250ピクセルで、幅はコンテナの幅（960グリッドCSSを使用）でなければなりません。

私はこのレイアウトを持っています。

<div class="grid_10 news"> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</div> 

記事は、情報、メタデータが含まれていOFCなどだけでなく、その完全な高さに記事を拡張する必要があり、右側のリンク「続きを読みます」。

現在、記事に特定の高さやCSSはありません（表示：ブロックを除く）。だからあなたは技術のために何を使用し、あなたはどうしますか？

乾杯。

Answer 1

新しい高さを知らない場合は、高さをautoに設定できます。記事があなたの読み取り、あなたが次のことを行うことができ-linkより-ボタン/の親である場合 だから：あなたがスムーズな移行を探しているので、もし、しかし直接アニメーション可能ではありません

$(".your_read_more_button").parent().css('height', 'auto'); 

、あなたはどちらかに持っているでしょうそれを複製し、実際に表示された高さを取得し、元の画像をアニメーション化するか、またはslideUp（）およびslideDown（）を使用して、その間の高さを変更します。

次のCSS3の遷移を行うことができます前にして、展開した後、あなたが高さを知っている場合：

.news article 
{ 
    -moz-transition: height 1s ease-in-out; 
    -webkit-transition: height 1s ease-in-out; 
    -o-transition: height 1s ease-in-out; 
    transition: height 1s ease-in-out; 
} 

.expanded 
{ 
    height: 250px; 
} 

か、単にjQueryのアニメーションを使用します。

のみ1つの高さから変更されます

$('article').stop(true,true).animate({height: 250px}, 400); 

.toggle（）とは異なり、短い瞬間に要素が見えなくなるため、アニメーション中のページ全体の印象を乱す可能性が高くなります。