Высота анимации jQuery

У меня есть кнопка и div с внутри текста:

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

Я хочу показать только 2 строки текста по умолчанию, поэтому я поставил высоту в 30 пикселей и переполненную Скрытую.

Когда я нажимаю на элемент H2, я хочу анимировать текст в slideDown, и если я нажму еще раз, то он сдвинетUp на высоту по умолчанию (30px).

Я пытаюсь многое с помощью jQuery, но он не работает.

EDIT:

У меня также есть несколько "расширений" и более одного "H2", а текст отличается от div, поэтому высота не исправлена ​​... Я хотел бы перейти на "авто" высоту или на 100%.

Может кто-нибудь мне помочь? Спасибо!

Ответы

Ответ 1

Вы можете сохранить высоту перед тем, как похудеть до 30 пикселей при загрузке страницы, например:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

Затем в вашем обработчике click:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

Итак, что это такое, получим .height() (запустите это в document.ready) перед установкой overflow: hidden и сохраните его через $.data(), затем в обработчиках click (через .toggle(), чтобы чередовать), мы используем это значение ( или 30), каждый другой щелчок на .animate() до.

Ответ 2

Свойство scrollHeight элемента DOM также может дать вам необходимую высоту.

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

Рабочий пример можно найти на http://jsfiddle.net/af3xy/4/

Ответ 3

Этот поток не самый новый, но здесь другой подход.

Сегодня я столкнулся с той же проблемой и не смог заставить ее работать правильно. Даже при правильной высоте, рассчитанной с использованием height: auto, анимация не дала бы мне правильных результатов. Я попытался поместить его в $(window).load вместо $(document).ready, что немного помогло, но все же отрезало мою последнюю строку текста.

Вместо того, чтобы анимировать высоту, я смог решить проблему, добавив и удалив скрытый класс в мой div динамически. Если вы используете jQuery-UI, вы можете применить длительность этих эффектов. Кажется, что это работает и во всех браузерах.

Здесь рабочий экзамен.