实现无内容失真的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>

我监听'button‘div的click事件

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

});