Javascript 实现无内容失真的slideUp（）

我想实现一个简单的向上滑动和向下滑动机制，以便在按下按钮时显示内容。使用现成的jquery函数slideUp（）和slideDown（）压缩内容。我希望幻灯片机制与twitter中使用的机制类似（在时间线中，当您单击tweet时，更多信息和选项会向下滑动）。在那里，内容不会被压扁。相反，底部边框在内容上无缝移动，从而向上滑动而不会挤压。关于如何实现这一点有什么建议吗

编辑：

要滑入和滑出可见性的内容位于div内

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

这是一个基本的滑块。设置动画时，“slider”div中的内容会被压扁和扭曲。

试试这个

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

$(function(){

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

});