jQuery同步动画jquery

Question

我有固定标题，按钮点击后会消失。

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>

Bssic CSS

.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-left: 100px;
    position: relative;
}
.page-container, .page-wrapper{
    min-height: 400px;
   height: 100%; 
}
.header, .sidebar{
    position: fixed !important;
    top: 0;
    left: 0;
}
.header{
   width: 100%;
    height: 65px;
    background: #2c3e50;
    z-index: 90; 
}
.sidebar{
    top: 65px;
    height: 100%;
    width: 100px;
    background-color: #efefef;
}
.page{
    top: 65px;
    position: relative;
}

我创建了一些JQuery代码，它将标题height: 0;和侧边栏和页面顶部属性设置为0. DEMO问题是动画异步工作。标题消失，然后内容和侧边栏上升。有人可以说，我如何同步动画。

Answer 1

您对标题动画配置感到困惑。 duration和queue作为第二个参数进入单独的对象。它应该是：

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

和

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

演示：http://jsfiddle.net/r2h1xopn/25/

奖金。自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');
});

演示：http://jsfiddle.net/r2h1xopn/27/

Answer 2

替换

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

带

, duration: 200, queue: false });