1

我有一个具有以下设置的 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>

我还有一个 CSS 类设置hidden，显示设置为 none。

我有这样的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 的过渡添加一些动画，当单击“控件”时，可能有一个向上滑动，另一个向下滑动，反之亦然，但我无法实现这一点。

任何人都可以帮忙并就如何做到这一点提供一些建议吗？

欢呼

伊夫

4

2 回答 2

2

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

于 2010-03-18T00:06:24.070 回答
0

你所描述的被称为手风琴。如果你想使用jQuery UI，有内置的手风琴支持。在现场查看手风琴演示。您可以下载该库并查看它是如何工作的。如果您想自己尝试，它将让您了解如何实现此类功能。

于 2010-03-18T00:13:23.780 回答