使得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隊列，但problam是CSS我認爲，堅果jQuery ...任何想法？

Answer 1

加 position：absolute;寬度：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>