Ajuste temporariamente a altura do elemento no mouse

Question

eu tenho um <h3> Tag com altura limitada (100 px, por exemplo, posição: absoluta) e o texto o transborda.

O que eu gostaria de fazer é deslizá -lo para a altura necessária quando o mouse terminar e voltar à altura original (100px).
Espero que você entenda o que quero dizer

Eu não acho que ele usa a função slidown () para isso e eu sou muito fraco na função animada. Alguma ajuda, por favor?

Answer 1

Você pode aninhar uma div dentro do H3 que contém o conteúdo e, em seguida, use o H3 como um recipiente de máscara (use estouro: oculto). Quando o usuário mouses acabar, dispare uma função que obtém a altura do interior Div (inclua quaisquer margens ou preenchimento). Em seguida, execute sua altura, ajuste a função animada (em jQuery, algo como $('h3').animate({height: heightVar}); ) O MouseOut dispara uma função que restaura a altura do H3 de volta a 100px.

Aqui está uma amostra: http://jsfiddle.net/xr9fb/

Answer 2

Você pode obter a altura real do elemento com o scrollHeight propriedade. Agora, eu realmente não sei muito de jQuery, mas imagino que você possa chamar Animate para definir a propriedade CSS da altura para o scrollHeight do elemento quando o mouse o passa e retorna à altura original quando o mouse se afasta dele.

Se a altura do elemento não for fixada, você poderá salvar a altura atual em algum lugar antes de exibir o elemento completo e, quando o mouse deixar o elemento, você apenas restaura esse estado.