實現沒有內容失真的slideUp（）

Question

我想實現一個簡單的向上滑動和向下滑動機制，以便在按下按鈕時顯示內容。使用開箱即用的jquery函數slideUp（）和slideDown（）壓縮內容。我希望幻燈片機制與Twitter中使用的機制類似（在時間軸上點擊推文，更多信息和選項向下滑動）。那裏的內容不會被擠壓。相反，底部邊框無縫地移動內容，從而滑動而不會變扁。任何關於如何實現這一點的指針？

編輯：

的內容進行滑動進出的知名度是一個div

<div id='container'> 
<div id='slider'> 
    <div> other content </div> 
</div> 
<div id='button'> 
    Click to slide 
    </div> 
</div> 

我聽的 '按鈕' 的點擊事件DIV

$('.button').click(function(){ 
    if($('.slider').is(":visible")) 
    { 
    $('.slider').slideUp(); 
    } 
    else { $('.slider').slideDown(); } 
}); 

內這是一個基本的滑塊。動畫時，'滑塊'div內的內容會變形並變形。

Answer 1

試試這個demo

$(function(){ 

    $('#button').click(function(){ 
    if($('#slider').is(":visible")) 
    { 
    $('#slider').slideUp(); 
    } 
    else { $('#slider').slideDown(); } 
}); 

});