0

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

Jクエリ:

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

ここに私の問題があります。「ナビゲーション」が上から 5% になるまで、「ヘッダー」全体を上に移動したいと思います。誰にもアイデアがありますか？

ここでは -=60% を使用して何をしたいのかを説明していますが、「ナビゲーション」が上から 5% に達したときにアニメーションを停止することを望んでいます: http://jsfiddle.net/6xPMW/

4

1 に答える 1

0

編集

これは完璧な解決策ではないと思いますが、うまくいきます: http://jsfiddle.net/6xPMW/3/

  • あなたbrのは間違っているように見えます。次のように、最後にスラッシュを閉じる必要があります。<br />
  • <li>hrefs には属性を持たないでください。<a>タグを内部に配置するか、rel属性を使用してください。例:<li rel="#">
  • 何が起こるかよくわかりません。あなたのヘッダーは、どのような状態になるまでアニメーション化されますか? また、とにかく window.location を変更するときにアニメーションを実行するポイントは何ですか? たぶん、jsfiddleの例を提供してください。
于 2013-04-29T15:31:15.657 に答える