jquery - jquery 为 div 设置动画以移动直到子 div 位于某个位置

Question

HTML：

    <header>
        <div id="title_container"><h1 id="title">EXAMPLE<h1></div>
        <div id="slogan_container"><p id="slogan">EXAMPLE</p></div>
        <br/><br/>
        <nav id="menu_container">
            <ul id="menu">
                <li>nav1</li>
                <li>nav2</li>
                <li>nav3</li>
                <li>nav4</li>
                <li>nav5</li>
            </ul>
        </nav>
     </header>

CSS：

header {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    top: 20%;
    width: 100%;
    z-index: 10;
    overflow: auto;
}

查询：

$('li').click(function(){
    $('header').animate({???},  5000, function(){
        window.location.href = link;
    });
});

所以这是我的问题：我希望我的整个“标题”向上移动，直到“导航”距离顶部 5%。有人有想法吗？

这里我使用 -=60% 来说明我想要发生的事情，但我想要的是当“导航”从顶部达到 5% 时动画停止：http: //jsfiddle.net/6xPMW/

Answer 1

编辑

我想这不是完美的解决方案，但它有效：http: //jsfiddle.net/6xPMW/3/

---

• 你br的 s 看起来不对，他们应该在最后有结束斜线，像这样：<br />
• <li>s 不应该有href属性，而是将<a>标签放在里面或使用rel属性，例如：<li rel="#">
• 我不太明白会发生什么。您的标题应在什么条件下进行动画处理？另外，当你改变 window.location 时，做动画有什么意义呢？也许你可以提供一个 jsfiddle 例子，拜托。