Расширение элементов с помощью JavaScript, лучший способ?

Question

Я встречал многочисленные способы расширения элементов на веб-страницах, например, div с использованием javascript и jquery.Я хотел бы знать, каков наилучший и самый простой способ сделать это, когда мы смотрим на производительность и т. Д.

В моем примере у меня есть новый сайт, который я создаю, и на первой странице новостьраздел.Новости должны быть определенной высоты, скажем 250px, а ширина соответствует ширине контейнера (используя сетку 960 css).

У меня есть этот макет.

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

Статьясодержит информацию оф, метаданные и т. д., а также ссылку «читать дальше» с правой стороны, которая должна развернуть статью до ее полной высоты.

Прямо сейчас у меня нет определенной высоты или css к статьекроме дисплея: блок).Так что бы вы, ребята, использовали для техники и как бы вы делали?

Приветствия.

Answer 1

Вы можете установить высоту на авто, если вы никогда не знаете новую предстоящую высоту.Так что, если статья является родительской для вашей кнопки «читать далее», вы можете сделать следующее:

$(".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 animate:

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

Это изменится только с 1 высоты на другую, в отличие от .toggle (), которая делаетэлемент, невидимый в течение короткого момента, который, как мне кажется, больше всего может повлиять на общее впечатление страниц во время его анимации