切換div動畫

試圖使此動畫有效，因此一次只打開一個content5 div，目前有3個heading5 div和三個內容5 div。如果您單擊其中一個標題5鏈接以「打開」content5子項，則其他content5子項應該關閉，以便它們打開。我知道這應該很容易，但我似乎無法取消它，我不斷學習這麼多不合適的東西。需要觀看更多的Crockford。預先感謝您的幫助。切換div動畫

$(document).ready(function() { 
    $(".content5").hide(); 
    $(".heading5").click(function() 
    { 
    $(this).next(".content5").animate({width: 'toggle'}, 'slow'); 
    }); 
});

下面是HTML

<div class="heading5 menu-item-text" id="leftend">About</div> 
<div class="content5 clearfix" id="menu-1"> 
    //Links in here 
</div> 
<div class="heading5 menu-item-text"><a href"#" data-target="2">Contact</a></div> 
<div class="content5 clearfix" id="menu-2"> 
     //More links in here 
</div> 
<div class="heading5 menu-item-text" data-target="3"><a href"#">Portfolio</a></div> 
<div class="content5 nav clearfix" id="menu-3" data-option-key="filter"> 
//and more in here 
</div>

下面是一個小提琴http://jsfiddle.net/jkuhns/NRsXS/

我實現滑動菜單開啓寬度明智的，因爲它可能會切斷的危險，但我有風格不同的菜單對於不同的屏幕尺寸，所以我應該沒問題。在小提琴中，請忽略可怕的鼠標懸停效果，我在查詢移動中打擊了一種css風格，我還沒有擊敗過，因此，現在我將鼠標懸停放置，直到獲得它爲止。

來源

2013-02-27 jkuhns5

你可以做一個小提琴？ – 2013-02-27 04:48:06

你能分享你的html代碼嗎？ – 2013-02-27 04:53:04

請提供小提琴內容，因爲您提供的代碼和說明不夠 – 2013-02-27 05:02:23

前行右

$(this).next(".content5").animate({width: 'toggle'}, 'slow');

添加

$('.content5').animate({width: 0}, 'slow')

編輯：更新的代碼在小提琴：jsfiddle.net/fNZaV/2

來源

2013-02-27 05:47:51 bcherny

當我第一次看到這個時，我認爲我全部設置了，非常有意義，將所有寬度設置爲0，並切換所需的寬度，但不是，我必須在CSS中的浮點數出錯。我甚至嘗試分離出所有的部分，並通過ID打電話給他們。 – jkuhns5 2013-02-27 12:57:42

@ jkuhns5如果動畫不起作用，請嘗試將內容元素「overflow」設置爲「hidden」。如果它仍然不起作用，看看它是否工作，當你動畫不同的屬性，而不是'width'，說'display'，然後你可以在'inline-block'和'none'之間切換。 – bcherny 2013-02-27 22:57:51

仍然沒有骰子，似乎並不重要什麼財產我動畫，從我可以告訴的東西正在發生，但內容div正在移動像以前一樣的下一個頭div。要scrounge，看看我還能找到什麼....我嘗試更改浮動設置，但這更糟糕。 – jkuhns5 2013-02-28 01:42:50

回答

相關問題