Question

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

从演示（http://jsfiddle.net/xy1x885n/）可以看出，滑出工作正常，但是当再次滑入时，侧边栏div在动画开始之前设置为100％宽度，从而产生非常刺耳的效果。如果您检查侧边栏元素并非常仔细地观察宽度css属性，则更容易看到。

在Chrome 43，IE 11＆amp; FF开发人员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（）在动画宽度

1 个答案: