用javascript擴展元素，最好的方法？

我遇到過在網頁上擴展元素的非常方式，例如div和javascript和jquery。我想知道當我們看性能等時，做這件事的最好和最簡單的方法是什麼。用javascript擴展元素，最好的方法？

在我的例子中，我有一個新的網站，我正在建設和新聞部分的頭版。新聞項目應該在特定的高度，比如說250px，寬度是容器的寬度（使用960 grid css）。

我有這個佈局。

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

本文包含OFC信息，元數據等，但也有「更多」右側鏈接應該擴大文章充分發揮其高度。

現在，我沒有具體的高度或CSS的文章（除了顯示：塊）。那麼你們會用什麼技術，你會怎麼做？

乾杯。

來源

2011-07-26 jinxen

如果您永遠不知道即將到來的新高度，可以將高度設置爲自動。因此，如果文章是你讀更多的按鈕/連桿式，你可以做以下的父：

$(".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動畫：

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

這隻會從1米改變高度而不是.toggle（），這使得元素在短時間內不可見，而我個人發現它更容易在其動畫中打擾整個頁面的印象。

來源

2011-07-26 08:09:13 Semyazas

我會喜歡將高度設置爲最大250px，因爲每篇新聞文章應該具有相同的高度。然後使用jQuery將它們很好地展開一些動畫，使用toggle（）或其他。 – jinxen

看到我編輯的答案 – Semyazas

很酷，這看起來更像是我想要的。雖然我知道之前沒有高度。展開前的高度爲250像素。新聞項目的高度可以達到700px，我知道的所有內容:) – jinxen

用javascript擴展元素，最好的方法？

回答

相關問題