jQuery анимация высоты - PullRequest
Новая
       2

jQuery анимация высоты

18 голосов
/ 05 января 2011

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

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

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

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

Я пробую много вещей с помощью jQuery, но это не работает.

EDIT:

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

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

Ответы [ 3 ]

27 голосов
/ 05 января 2011

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

$(".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() to.

5 голосов
/ 22 апреля 2014

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

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

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

2 голосов
/ 20 июня 2012

Эта тема не самая новая, но есть и другой подход.

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

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

Вот рабочий экзамен.

...