jquery - jQuery click事件使div向下滑动并将下一个div推离视口(viewport)

我试图找出如何使jQuery幻灯片＃content2向下并用它替换＃content1，同时使它看起来像＃content1实际上是由＃content2推下了，将其从视图中移除...

然后，单击以使＃content2替换＃content1的同一按钮也需要通过将＃content2替换为＃content1来使它们向上滑动并相互推开，以产生相反的效果...

我对jQuery并不是很好，所以我确定我以错误的方式进行了尝试，但这是我尝试过的方法：

$(document).ready(function() {
$('#click').click(function() {
 if($('#content1').is(':visible')) {
  $('#content1').slideUp();
 }
 else {
  $('#content2').slideDown();
 }
}).click(function() {
 if($('#content1').is(':visible')) {
  $('#content2').slideDown();
 }
 else {
  $('#content1').slideUp();
 }
});

}）;

最佳答案

您只需要绑定一次单击，就可以切换幻灯片效果。
你可以尝试这样的事情

$(document).ready(function() {

  $('#click').click(function() {
    $('#content1').slideToggle();
    $('#content2').slideToggle();
  }
}