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

Question

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

正如您从演示 (http://jsfiddle.net/xy1x885n/) 中看到的那样，滑出效果很好，但是当再次滑入时，侧边栏 div 在动画开始前设置为 100% 宽度造成非常不和谐的效果。如果您检查侧边栏元素并非常仔细地观察宽度 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

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

jQuery .animate() sets it's own initial value when animating width

jquery

jquery-animate