jQuery slideDown con altezza impostata e troppo pieno

Question

Ho il seguente codice HTML

<div class="text">bla bla bla bla</div> 
<div class="button">Show</div> 

E il CSS

.text{ 
    height:100px; 
    overflow:hidden; 
} 

Si supponga .textdiv ha modo più testo e quello che faccio è nascondere la quantità di testo sotto 100 px.

Come posso slideDown() il div così posso visualizzare il testo quando faccio clic sul pulsante?

L'utilizzo di $(".button").slideDown(); non funziona perché è necessario rimuovere l'altezza e quindi slideDown() ma non funzionerà.

Answer 1

Prova questa è molto semplice e facile senza creare alcun clone.

$(function(){ 
    $(".button").click(function(){ 
     var $text = $(".text"); 
     var contentHeight = $text 
          .addClass('heightAuto').height(); 
     $text.removeClass('heightAuto').animate({ 
      height: (contentHeight == $text.height() ? 100 : contentHeight) 
     }, 500); 

    }); 
}); 

Aggiunta una nuova classe

.heightAuto{ 
    height:auto; 
} 

Demo

Answer 2

Ho appena letto in modo errato la tua domanda.

Sfortunatamente, non è possibile impostare l'altezza automatica. Ma puoi animare a un'altezza impostata, usando .animate();

.animate({height:'200px'};

slideUp()' e .slideDown(); impostare i div per display: none e display: block Quindi hai ragione, non avrebbe funzionato per quello che stai cercando di fare.

EDIT

Ho appena visto il post di Kato. Questa è probabilmente l'opzione migliore per te.

Answer 3

Opzione pulita ma costosa: utilizzare animare direttamente anziché slideDown(). Determina l'altezza alla quale vuoi animare creando un clone e impostando l'altezza su Auto.

$('.button').click(function() { 
    var $div = $('div.text'); 
    $div.animate({height: determineActualHeight($div)}); 
}); 

// if you can determine the div's height without this, it would be faster 
// what makes this expensive is inserting and removing an element from the dom 
// of course, you aren't doing this a thousand times a second, so it's probably no biggie 
function determineActualHeight($div) { 
    var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()), 
     height = $clone.height(); 
    $clone.remove(); 
    return height; 
} 

Un'opzione poco più brutto, ma meno costoso: basta impostare l'altezza su auto, nascondere l'elemento, quindi utilizzare slideDown() per renderlo:

$('.button').click(function() { 
    $('div.text').hide().css('height', 'auto').slideDown(); 
} 

Answer 4

Mi piace la soluzione di Shankar ma la funzionalità si rompe dopo le prime due clic .. Questo è perché la classe auto viene sovrascritta da lo stile di altezza in linea. Così invece ho modificato solo l'attributo altezza.

Ecco il mio andare a esso:

$(".button").click(function(){ 
    $box = $(".text"); 
    minimumHeight = 100; 

    // get current height 
    currentHeight = $box.height(); 

    // get height with auto applied 
    autoHeight = $box.css('height', 'auto').height(); 

    // reset height and revert to original if current and auto are equal 
    $box.css('height', currentHeight).animate({ 
     height: (currentHeight == autoHeight ? minimumHeight : autoHeight) 
    }) 
}); 

Un difetto è che se si aggiunge imbottitura per la casella si ottiene qualche brutto salto. Aperto alle slitte su questo.

Here's a demo

miglioramenti e suggerimenti sono i benvenuti

Answer 5

proprietà utilizzo scrollHeight, questo può rendere lo script dinamici.

$('.button').click(function() { 
    $('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000); 
});