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;
}

JQUERY：

$('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看起来不对，最后应该有结束斜线，像这样：<br />

<li>不应包含href属性，而应放置<a>个标记在里面或使用rel属性，例如：<li rel="#">

我不太明白会发生什么。你的标题应该是动画直到什么条件？此外，最重要的是做什么你改变window.location的动画呢？可能是你请提供一个jsfiddle例子。

jquery动画div移动直到子div处于某个位置

1 个答案: