Question

我有一个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>

我还有一个名为hidden的CSS类设置，其显示设置为无。

我有这样的jQuery设置：

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

  });

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

然而，这只是隐藏并在瞬间显示每个div。我想在div的转换中添加一些动画，可能有一个向上滑动，另一个向下滑动，当点击'control'时反之亦然，但我无法实现这一点。

有人可以提供帮助并就如何做到这一点提出一些建议吗？

啦啦队

EEF

Answer 1

我建议你使用jQuery Effects来淡化/滑动/将你的元素放入视图中，而不是使用jQuery来修改元素的类并依赖CSS来隐藏它们。

Answer 2

您所描述的内容被称为手风琴。如果您想使用jQuery UI，可以使用内置的手风琴支持。在网站上查看accordion demo。您可以下载该库并查看它的工作原理。如果您想尝试自己动手，它会让您了解如何实现此类功能。

jQuery切换div可见性

2 个答案: