jQuery altezza animate

Question

Ho un pulsante e un div con al suo interno un testo:

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

Voglio mostrare solo 2 righe del testo come di default, così ho messo altezza 30px e troppo pieno nascosto.

Quando scatto sull'elemento H2 voglio animare il testo da slideDown e se clicco un'altra volta lo farà slideUp all'altezza di default (30px).

Sto cercando molte cose con jQuery, ma non funziona.

EDIT:

Ho anche più di uno "espandere" e più di un "H2" e il testo è diverso in div, quindi l'altezza non è fissa ... Vorrei scorrevoli a "auto" altezza o 100%.

qualcuno aiuto

Can me? Grazie!

Answer 1

È possibile memorizzare l'altezza appena prima di dimagrimento in giù a 30px al caricamento della pagina, ad esempio:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

Poi, nel tuo gestore click:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

Allora, cosa che fa è ottenere il .height() (eseguire questo in document.ready) prima il overflow: hidden ha fissato, e lo memorizza via $.data() , poi nei gestori click (tramite .toggle() di alternare), usiamo quel valore (o 30) ogni altro click su .animate() a.

Answer 2

La proprietà scrollHeight dell'elemento DOM potrebbe anche dare l'altezza è necessario.

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

esempio di lavoro sono disponibili all'indirizzo http://jsfiddle.net/af3xy/4/

Answer 3

Questo thread non è il più nuovo, ma ecco un altro approccio.

Ho avuto a che fare con lo stesso problema di oggi e non poteva farlo funzionare correttamente. Anche con la giusta altezza calcolata con height: auto applicata, l'animazione non mi avrebbe dato i risultati corretti. Ho provato a metterlo in $(window).load invece di $(document).ready, che ha aiutato un po ', ma ancora tagliato fuori la mia ultima riga di testo.

Invece di animare l'altezza in sé, sono stato in grado di risolvere il problema con l'aggiunta e la rimozione di un nascosto di classe per il mio div in modo dinamico. Se si utilizza jQuery-UI, è possibile applicare una durata a questi effetti. Questo sembra funzionare in tutti i browser, anche.

Ecco un'exampe lavoro.