jQuery 同步动画 jquery答案

【问题标题】：jQuery synchronize animations jqueryjQuery 同步动画 jquery
【发布时间】：2014-12-10 15:07:09
【问题描述】：

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

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>

基本 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 问题是动画异步工作。标题消失，然后内容和侧边栏上升。有人可以说，我怎样才能同步动画。

【问题讨论】：

标签： javascript jquery animation jquery-animate

【解决方案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/

【讨论】：

【解决方案2】：

替换

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

与

, duration: 200, queue: false });

【讨论】：