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可見

回答

相關問題