CSS-jQuery-向左滚动一个div，同时将另一个div扩展到100%宽度

Question

我将html页面/屏幕拆分为4个主要部分/div。页眉、页脚、主体和左侧垂直导航面板。导航面板宽度为20%，主体div为屏幕宽度的80%。我在导航面板中有一个按钮可以隐藏和显示。所以当用户点击这个按钮时，它会隐藏导航面板，并使主体宽度为屏幕的100%，反之亦然。我已经使用jQuery实现了这个功能，但它并不平滑，我的意思是，点击导航面板向左滑动，但同时它使main_body消失，直到导航面板完全向左滚动。

我希望这个功能运行平稳，即在导航面板向左滚动的同时，主体div增加了宽度。

http://jsfiddle.net/toxic_kz/73c8o8tq/

jQuery

$(document).ready(function () {
  $(".NavigationpanelIcon_Wrapper").click(function () {
    $('#NavigationBlock').hide('slide', { direction: 'left' }, 1000);
    $('.Main_body_Right_Wrapper').css('width', '100%');
  });

})；

HTML ASP.net-MVC-Razor

<div id="body_main_wrapper">
        <div id="NavigationBlock" class="Navigation_Left_Pannel_Wrapper">
            <div id="Navigation_panel_sideBar">  
                <div class="NavigationpanelIcon_Wrapper">
                        <span class="_blank_glyphicon">
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </span>
                </div>
                <div class="NavigationpanelText_Wrapper">
                    <span class="navigationpaneltext">
                        Available Functions
                    </span> 
                </div>
             </div>
            <div id="Navigation_list_wrapper">
                @{Html.RenderAction("DisplayFunctionsList", "Dashboard");}
            </div>
        </div> <!--end Navigation_Left_Pannel_Wrapper-->
        <div class="Main_body_Right_Wrapper">
            @RenderBody()
        </div> <!--end Main_body_Right_pannel_Wrapper-->
</div> <!--end body_main_wrapper-->

Answer 1

我试图在这里快速复制这个Fiddle

您可以包装这两个元素并将侧边栏向左浮动，同时给它一个固定的位置大小，然后给主体一个等于侧边栏导航宽度的margin-left。。然后点击隐藏侧边栏并重新设置主体的边距
如果它对你不起作用，请告诉我。。

Answer 2

设置宽度的动画。Main_body_Right_Wrapper应该做到这一点：

$(document).ready(function () {
  $(".NavigationpanelIcon_Wrapper").click(function () {
    var duration = 1000;
    $('#NavigationBlock').hide('slide', { direction: 'left' }, duration);
    $('.Main_body_Right_Wrapper').animate({
        width: '100%'
    }, duration);
  });
});

编辑：我用@AwRak的小提琴来说明它。