使jQuery .show()和.hide()并行运行并具有UI效果

Question

我试图在jquery：http://jsfiddle.net/rXjMV/5/中制作一个带有滑动效果的漂亮菜单

$(".goBack").click(function() {
    $(this).parent().hide('slide', {
        direction: 'right'
    });
    $("#parentSidebar").show('slide', {
        direction: 'left'
    });
});
$(".sidebarMover").click(function() {
    var newmenu = $(this).attr('name');
    $(this).parent().hide('slide', {
        direction: 'left'
    });
    $("#" + newmenu + "Sidebar").show('slide', {
        direction: 'right'
    });
});

注意，如果你点击足球，菜单会向左滑动，而另一个菜单则是从右边来的，但它们从另一个下面而不是并排而来。

尝试了许多事情，显示:内联和使用jQuery队列的延迟()，但我认为问题是CSS，jQuery.有什么想法吗？

Answer 1

添加位置:绝对；宽度: 100%；在容器中这样：

<div id="sideBar">
    <div id="sideHead">TICKET MENU</div>
    <hr id="sideHeadSeperator">
       <div class="sideItemContainer" id="parentSidebar" style="position:absolute;width:100%; ">
          <div class="sideItem sidebarMover" name="football">Football<i class="fa fa-caret-right"></i></div>
          <div class="sideItem sidebarMover" name="tennis">Tennis<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Rugby<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Basketball<i class="fa fa-caret-right"></i></div>
       </div>
       <div class="sideItemContainer" id="footballSidebar" style="display: none;position:absolute; ;width:100%;" >
          <div class="sideItem">Arsenal<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Chelsea<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Liverpool<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Manchester Utd<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Manchester City<i class="fa fa-caret-right"></i></div>
          <div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
        </div>
        <div class="sideItemContainer" id="tennisSidebar" style="display: none;">
           <div class="sideItem">Wimbledon<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">Rome Masters<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">US Open<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">Roland Garros<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">Madrid Masters<i class="fa fa-caret-right"></i></div>
           <div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
      </div>
</div>