JQuery slideDown с заданной высоты и переливом

Question

У меня есть следующий HTML-код

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

И CSS

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

Предположим .textdiv имеет намного больше текста и то, что я делаю, это скрыть количество текста ниже 100 пикселей.

Как я могу slideDown()div, чтобы я мог просматривать текст при нажатии кнопки?

Использование $(".button").slideDown(); не работает, потому что мне нужно удалить высоту, а затем slideDown(), но это тоже не сработает.

Answer 1

Попробуйте это очень простой и легкий без создания клона.

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

    }); 
}); 

Добавлен новый класс

.heightAuto{ 
    height:auto; 
} 

Demo

Answer 2

Я просто совершенно неправильно прочитал ваш вопрос.

К сожалению, вы не можете установить максимальную высоту. Но вы можете оживить высоту набора, используя .animate();

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

slideUp()' и .slideDown(); установить дивы в display: none и display: block Таким образом, вы правы, что не будет работать для того, что вы пытаетесь сделать.

EDIT

Я только что видел пост Като. Это, наверное, лучший вариант для вас.

Answer 3

Чистый, но дорогой вариант: используйте вместо анимации вместо slideDown(). Определите высоту, которую хотите оживить, создав клон и установив высоту в 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; 
} 

Маленький уродливее но менее дорогой вариант: просто установите высоту на авто, скрыть элемент, а затем использовать slideDown(), чтобы сделать его:

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

Answer 4

Мне нравится решение Шанкар, но функциональность ломается после первых двух кликов .. Это потому, что автомобиль класса получает перезаписаны стиль строчной высоты. Поэтому вместо этого я изменил атрибут высоты.

Вот мой пойти на это:

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

Один недостаток заключается в том, что если добавить отступы к коробке вы получаете некоторые уродливые прыжки. Открыты для этого.

Here's a demo

Улучшения и предложения приветствуются

Answer 5

использование scrollHeight свойство, это может сделать ваш скрипт динамический.

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