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

【问题标题】：jQuery .animate() sets it's own initial value when animating widthjQuery .animate() 在动画宽度时设置它自己的初始值
【发布时间】：2015-07-02 09:44:46
【问题描述】：

我正在开发一个侧边栏的实现，它从左侧滑入，同时挤压主要内容 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% 而不仅仅是从初始宽度开始？

提前致谢。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

将侧边栏的宽度设置为0，而不是"0%"：

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

Updated fiddle

【讨论】：

天才！谢谢你的作品就像我的魅力。你知道为什么会这样吗？如果是这样，你能更新你的答案吗？（如果允许，我会在 5 分钟内接受）。
我试图调查原因，老实说，我不知道。当将该值设置为0% 的字符串时，div 以与最初设置的完全不同的宽度开始动画。这可能是一个错误。
谢谢，我会在 jQuery 错误跟踪器中发布它，看看我会得到什么响应。