Временно отрегулируйте высоту элемента при зависании

Question

У меня есть метка <h3> с ограниченной высотой (100 пикселей, например, позиция: абсолютная), и текст переполняет ее.

Что бы я хотел сделать, это сместить его на высоту, которая необходима, когда мышь над ним и обратно к исходной высоте (100 пикселей).
Надеюсь, вы поняли, что я имею в виду

Я не думаю, что для этого используется функция slidedown(), и я очень слаб в функции анимации. Любая помощь, пожалуйста?

Answer 1

Вы можете вложить div внутри h3, который содержит контент, а затем использовать h3 в качестве маскирующего контейнера (используйте переполнение: скрыто). Когда пользователь перейдет, запустите функцию, которая получит высоту внутреннего div (обязательно включите любые поля или отступы). Затем выполните настройку функции настройки высоты (в jQuery, что-то вроде $('h3').animate({height: heightVar});) Мышь запускает функцию, которая восстанавливает высоту h3 до 100 пикселей.

Вот пример: http://jsfiddle.net/XR9fb/

Answer 2

Вы можете получить реальную высоту элемента с scrollHeight свойством. Теперь я не очень много знаю о jQuery, но я думаю, вы могли бы просто вызвать анимацию, чтобы установить свойство CSS высоты в элемент scrollHeight элемента, когда мышь его наводит, и вернитесь к исходной высоте, когда мышь выйдет из Это.

Если высота элемента не фиксирована, вы можете замаскировать текущую высоту где-то перед отображением полного элемента, а когда мышь покинет элемент, вы просто восстановите это состояние.