的jQuery了slideDown與設定的高度和溢出

我有以下的HTML代碼的jQuery了slideDown與設定的高度和溢出

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

而CSS

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

假設.textdiv有方式更多的文字和我做的是隱藏的文本量低於100px。

我怎麼才能slideDown()div所以我可以查看文本，當我點擊按鈕？

使用$(".button").slideDown();不起作用，因爲我需要刪除高度，然後slideDown()但這也不起作用。

來源

2012-01-27 fxuser

http://stackoverflow.com/questions/1369715/how-can-i-animate-an-element-to-its-natural-height-using-jquery – skybondsor 2012-01-27 16:00:04

試試這個它是非常簡單和容易無需創建任何克隆。

$(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

來源

2012-01-27 16:00:55 ShankarSangoli

有趣;我認爲設置'height：auto'時會發生的'blip'會更加明顯。這是因爲直到函數返回（即準線程）CSS纔會被渲染？ – Kato 2012-01-27 16:17:21

它發生在幾分之一秒內。 – ShankarSangoli 2012-01-27 16:19:22

我在想它甚至沒有發生。我注意到之前，我必須setTimeout（），當我做css更改，然後嘗試立即使用它們。我懷疑在js方法退出之前CSS變化不會被應用。 – Kato 2012-01-27 19:26:37

我只是完全誤解了你的問題。

不幸的是，你不能真正設置爲自動高度。但是你可以使用.animate（）來設置動畫的高度。

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

slideUp()'和.slideDown();設置的div來display: none和display: block所以，你是對的，那不是你想要做什麼工作。

編輯

我剛纔看到加藤的帖子。這對你來說可能是最好的選擇。

來源

2012-01-27 15:57:24

你在正確的軌道上，你的第一個答案也不錯。你只需要高度：自動在CSS讓東西滾動:) – Kato 2012-01-27 16:11:36

啊，我沒有意識到'height：auto'與'.slideDown（）;' - 不是它默認爲'display：none '？此外，我不知道你可以''.animate（）;''height：auto'哈，我當然不是jQuery高手，所以我還有很長的路要走。 – 2012-01-27 16:15:43

清潔但昂貴的選項：直接使用動畫而不是slideDown（）。通過創建克隆並將高度設置爲自動，確定要設置動畫的高度。

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

來源

2012-01-27 15:57:26 Kato

打我吧哈哈我爲第二個選擇做了一個小提琴：O（你的是一個更清潔但是）http://jsfiddle.net/GordnFreeman/thJwU/9/ :) – Gordnfreeman 2012-01-27 16:00:41

而這真正是SO的難題是它不是？徹底回答或快速回答？因此，我總是嘗試對所有有用的答案進行註冊，而不僅僅是第一個，特別是如果每個答案都包含一些獨特有用的細節。 :)如果你做了這項工作，你應該發佈你的答案;我相信它會幫助別人。 – Kato 2012-01-27 16:09:16

好吧，我不想隱藏它...只需滑動它或動畫它 – fxuser 2012-01-27 17:57:12

我喜歡Shankar的解決方案，但該功能前兩個點擊後壞了。這是因爲汽車類得到由覆蓋內聯高度樣式。所以相反，我只改變了高度屬性。

這是我走在它：

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

改進和建議是非常值得歡迎的

來源

2012-10-05 19:19:29

使用scrollHeight屬性屬性，這樣可以使你的腳本動態。

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

來源

2013-06-28 18:25:02 GusDeCooL

的jQuery了slideDown與設定的高度和溢出

回答

相關問題