javascript - 在没有内容失真的情况下实现 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(); }
});

这是一个基本的滑块。'slider' div 中的内容在制作动画时会被挤压和扭曲。

Answer 1

试试这个演示

$(function(){

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

});