jQuery slideDown z zadanej wysokości i przepełnienie

Question

Mam następujący kod HTML

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

I CSS

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

Załóżmy .textdiv ma sposób więcej tekstu i co mogę zrobić, to ukryć ilość tekstu poniżej 100 pikseli.

Jak mogę slideDown() z div, więc mogę wyświetlić tekst po kliknięciu przycisku?

Używanie $(".button").slideDown(); nie działa, ponieważ muszę usunąć wysokość, a następnie slideDown(), ale to też nie zadziała.

Answer 1

Spróbuj to jest bardzo proste i łatwe bez tworzenia żadnego klonu.

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

    }); 
}); 

Dodano nową klasę

.heightAuto{ 
    height:auto; 
} 

Demo

Answer 2

Po prostu błędnie przeczytałem twoje pytanie.

Niestety, tak naprawdę nie można ustawić wysokości automatycznej. Ale możesz animować do ustawionej wysokości używając .animate();

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

slideUp()' i .slideDown(); ustawić div do display: none i display: block Tak masz rację, że nie będzie działać na co próbujesz zrobić.

EDIT

Widziałem tylko słupek Kato. To prawdopodobnie najlepsza opcja dla ciebie.

Answer 3

Czysta, ale droga opcja: użyj animacji bezpośrednio zamiast slajdu(). Określ wysokość, którą chcesz animować, tworząc klon i ustawiając wysokość na 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; 
} 

Trochę brzydsze ale tańsza opcja: wystarczy ustawić wysokość na auto, ukryć element, a następnie użyj slideDown(), aby uczynić go:

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

Answer 4

Lubię rozwiązanie Shankara ale funkcjonalność zepsuje po pierwszych dwóch kliknięć .. To dlatego, że klasa auto zostaje zastąpione przez wbudowany styl wysokości. Zamiast tego zmieniłem tylko atrybut wysokości.

Oto mój go na to:

$(".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) 
    }) 
}); 

Jedną wadą jest to, że jeśli dodać dopełnienie do skrzynki masz jakieś brzydkie skoków. Otwarte na to.

Here's a demo

Ulepszenia i sugestie są mile widziane

Answer 5

nieruchomość użycie scrollHeight, może to zrobić skrypt dynamiczny.

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