jQuery .animate() 在动画宽度时设置它自己的初始值

Question

我正在开发一个侧边栏的实现，该侧边栏从左侧滑入，从而挤压主要内容 div。

正如您从演示 ( http://jsfiddle.net/xy1x885n/ ) 中看到的，滑出效果很好，但是当再次滑入时，侧边栏 div 在动画开始之前设置为 100% 宽度，从而导致非常不和谐的效果。如果您仔细检查侧边栏元素并仔细观察 width css 属性，就更容易看到这一点。

这已在 Chrome 43、IE 11 和 FF Developer 40 上观察到

HTML:

<button type="button" onClick="toggleSidebar();">Toggle</button>
<div id="sidebar-container">
    <div id="sidebar-side">&nbsp;</div>
    <div id="sidebar-main">&nbsp;</div>
    <div class="clear"></div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
}
#sidebar-container {
    display: -webkit-flex;
    display: flex;
}
#sidebar-side {
    float: left;
    display: none;
    background-color: #0bf;
    opacity: 0;
    width: 0;
    overflow: hidden;
}
#sidebar-main {
    float: right;
    background-color: #fb0;
    width: 100%;
    height: 500px;
    -webkit-flex: 1;
    flex: 1;
}
.clear {
    height: 0;
    clear: both;
}

Javascript:

function toggleSidebar() {
    var sidebar = $("#sidebar-side");
    var main = $("#sidebar-main");
    if (sidebar.hasClass("active")) {
        sidebar.stop().animate({
            opacity: 0,
            width: "0%"
        }, function () {
            sidebar.css('display', 'none');
        });
        main.stop().animate({
            width: "100%"
        });
    } else {
        sidebar.css('display', 'block');
        main.stop().animate({
            width: "60%"
        });
        sidebar.stop().animate({
            opacity: 1,
            width: "40%"
        });
    }
    sidebar.toggleClass("active");
}

我在这里做错了什么/看到东西，还是 jQuery 真的将宽度设置为 100% 而不是仅仅从初始宽度开始？

提前致谢。

Answer 1

将侧边栏的宽度设置为0而不是“0%”:

sidebar.stop().animate({
    opacity: 0,
    width: 0
}, function(){
    sidebar.css('display', 'none');
});

Updated fiddle