在修复封面图像时使用 jQuery Animate 进行页面转换答案

【问题标题】：Page transition using jQuery Animate while having a fix cover image在修复封面图像时使用 jQuery Animate 进行页面转换
【发布时间】：2014-04-19 03:23:10
【问题描述】：

我有一个页面，在名为“page”的包装 div 上方有一个固定的页眉和页脚。 “div.page”包含两个名为“cover”和“content”的div。 'div.cover' 占据页面的一半，是一个固定的封面图像。 'div.content' 占据了另一半，是我的内容所在的地方，通常很长，使页面可滚动。这样做的目的是在您滚动阅读内容时将封面图像保留在原位。

<div class="wrapper">
    <header>
        <h2>Header</h2>
        <button id="btn">Run Page Transition</button>
    </header>
    <div class="page">
        <div class="cover"></div>
        <div class="content"></div>
    </div>
    <div class="newpage">
        <div class="cover"></div>
        <div class="content"></div>
    </div>
    <footer><h2>Footer</h2></footer>
</div>

示例：http://jsfiddle.net/L5qJW/

我需要在一个名为“div.newpage”的新页面中进行转换，该页面替换了“div.page”。我的动画有问题。为了使新的页面封面图像不可见，我需要从绝对位置而不是固定位置开始，但是一旦转换完成，我将其切换回固定位置，但随后我看到这个“弹回原位”导致过渡不平滑的效果。

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

尝试立即将.newpage 设置为position:fixed; top:0; height:100%，并摆脱更改其位置的方法。

小提琴：http://jsfiddle.net/L5qJW/8/

【讨论】：

另外，如果你在e.preventDefault(); 之后添加$('.page .content').fadeOut('fast');，我认为它看起来更流畅。