Temporalmente ajustar la altura del elemento sobre el que asoma

Question

I tiene una etiqueta <h3> con altura limitada (100 px por ejemplo, la posición: absoluta) y el texto desborda.

Lo que me gustaría hacer es deslizar hacia abajo a la altura que se necesita cuando el ratón está sobre ella y de nuevo a altura original (100px).
Espero que usted entiende lo que quiero decir

No creo que utiliza la función slideDown () para eso y yo soy muy débil en función animado. Cualquier ayuda por favor?

Answer 1

Puede anidar un div dentro de la h3 que contiene el contenido y luego usar el H3 como un contenedor de enmascaramiento (uso overflow: hidden). Cuando el usuario se desplaza sobre, disparan una función que get es la altura de la div interior (asegúrese de incluir cualquier margen o padding). A continuación, ejecute la altura que ajustar animado función (en jQuery, algo así como $('h3').animate({height: heightVar});) El mouseout dispara una función que restaura la altura de la parte posterior h3 a 100px.

He aquí una muestra: http://jsfiddle.net/XR9fb/

Answer 2

Se puede obtener la altura real del elemento con la propiedad scrollHeight. Ahora, yo no sé mucho de jQuery, pero me imagino que usted podría llamar animado para establecer la propiedad CSS a la altura del elemento scrollHeight cuando el ratón pasa de TI, y volver a la altura original cuando el ratón se mueve fuera de a él.

Si la altura del elemento no es fijo, puede tranquilizar la altura actual en algún lugar antes de mostrar el elemento completo, y cuando el ratón sale del elemento que acaba restaura este estado.