我有一个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
答案 0 :(得分:2)
我建议你使用jQuery Effects来淡化/滑动/将你的元素放入视图中,而不是使用jQuery来修改元素的类并依赖CSS来隐藏它们。
答案 1 :(得分:0)
您所描述的内容被称为手风琴。如果您想使用jQuery UI,可以使用内置的手风琴支持。在网站上查看accordion demo。您可以下载该库并查看它的工作原理。如果您想尝试自己动手,它会让您了解如何实现此类功能。