切换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

回答

相关问题