jQuery的切换div可见

我有下面安装一个HTML文档：jQuery的切换div可见

<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的转换，可能有一个幻灯片向上滑动，另一个向下滑动时，单击“控制”，反之亦然，但我无法实现这一点。

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

欢呼

EEF

来源

2010-03-17 RailsSon

而不是使用jQuery修改类的元素，依靠CSS来隐藏他们，我建议你使用jQuery Effects淡出/滑动/ bedazzle你的元素和出于视野。

来源

2010-03-18 00:06:24 Dancrumb

完美，slideToggle做的伎俩，非常感谢。 – RailsSon 2010-03-18 00:12:07

您所描述的内容被称为手风琴。如果您想使用jQuery UI，则可以使用内置的手风琴支持。在网站查看accordion demo。您可以下载该库并查看其工作原理。它会给你一个想法，如果你想自己尝试这样做，这种功能如何实现。

来源

2010-03-18 00:13:23

jQuery的切换div可见

回答

相关问题