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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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