Javascript jQuery同步动画jQuery

我有固定的标题，应该消失在按钮点击

HTML

<div class="wrapper">
    <div class="page-container">
        <header class="header">
           header
        </header>
        <div class="sidebar">
            sidebar
         </div>
        <div class="page-wrapper">
            <div class="page">
                <button>hide header</button>
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

我创建了一些JQuery代码，用于设置标题

height:0的动画和侧栏以及页面顶部属性设置为0。问题是动画是异步工作的。标题消失，然后内容和侧边栏上升。有人可以说，我如何同步动画。
替换

}, { duration: 200, queue: false});

与

您稍微混淆了标题动画配置
duration
和
queue
作为第二个参数进入单独的对象。应该是：

$(".header").css('overflow', 'hidden').animate({height: 0}, {
    duration: 200,
    queue: false
});

及

演示：
奖励。既然是2014年，你也可以使用CSS动画

.header, .sidebar {
    /* ... */
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.page-container.header-closed .header {
    height: 0;
}
.page-container.header-closed .sidebar,
.page-container.header-closed .page {
     top: 0;
}

然后非常简单的JS来触发它：

$('button').click(function() {
    $('.page-container').toggleClass('header-closed');
});

演示：
$(".header").css('overflow', 'initial').animate({height: '65px'}, {
    duration: 200,
    queue: false
});

.header, .sidebar {
    /* ... */
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.page-container.header-closed .header {
    height: 0;
}
.page-container.header-closed .sidebar,
.page-container.header-closed .page {
     top: 0;
}

$('button').click(function() {
    $('.page-container').toggleClass('header-closed');
});