jQuery切换div可见性

我有一个具有以下设置的HTML文档：

<div class="main-div" style="padding: 5px; border: 1px solid green;">

    <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple">
      First Div
      <a href="#" class="control">Control</a>
    </div>
    <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;">
      Second Div
      <a href="#" class="control">Control</a>

    </div>

  </div>

此设置切换div的可见性，单击控制按钮它隐藏一个div并显示另一个div

然而，这只是在一瞬间隐藏并显示每个div。我希望为div的转换添加一些动画，当单击“控件”时，可能会有一个向上滑动，另一个向下滑动，反之亦然，但我无法实现这一点

有没有人能帮忙，并就如何做到这一点提供一些建议

欢呼

---

Eef

与其使用jQuery来修改元素的类并依靠CSS来隐藏它们，我建议您使用淡入/滑动/隐藏视图中的元素。

您所描述的被称为手风琴。如果你想使用，有内置的支持手风琴。请在现场查看以上内容。您可以下载该库并了解它的工作原理。如果您想自己尝试，它将让您了解如何实现这种类型的功能

$('.control').click(function(){

    var master = $(this).parent().parent();
    var first_div = $(master).find(".first-div");
    var second_div = $(master).find(".second-div");

    $(first_div).toggleClass("hidden")
    $(second_div).toggleClass("hidden")

  });