0

私のページでは、ユーザーが1000ピクセルがページを下にスクロールしたと言うと、ナビゲーションがフェードアウトし、上にスクロールするとナビゲーションがフェードインします。完全に機能する次を使用しています...

// Fade Navigation

if(!$('nav ul').is(':visible')) {
    $('nav ul').stop().fadeIn(500);
} else {
    $('nav ul').stop().fadeOut(500);
}

私の唯一の問題は、非常に速くスクロールすると、アニメーションが表示されているかどうかがわからないことです。これを停止する方法はありますか?

4

2 に答える 2

1

true2番目のパラメータとしてに渡すと、.stop()アニメーションが停止し、アニメーションが実際に終了した場合の状態に要素がジャンプします。

つまり$('nav ul').stop(true, true).fadeIn(500)、要素がフェードアウトしているときに呼び出すと、フェードアウトが停止し、アニメーションを開始する前に論理的な終わり（完全にフェードアウト）にジャンプします。.fadeIn()

これを使用すると、上記のコードブロックの代わりに、次の問題を回避できるはずです。

$('nav ul').stop(true, true).fadeToggle(500);

少しぎくしゃくしたように見えますが、もう少し複雑なロジックで回避できます。

于 2013-02-21T16:53:25.567 に答える
0

私はこれで遊んでいます。コード内のコメントを参照してください。

<nav class="main">
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</nav>

<script type="text/javascript">

    // Do this outside of the onscroll handler.  onscroll is fired a lot,
    // so performance will slow if you're having to create jq instances
    // or navigate the dom several times
    var $wnd = $(window);
    var $nav = $('nav.main');

    // Added this to block the main handler from executing
    // while we are fading in or out...in attempt
    // to smooth the animation
    var blockHandler = false;

    window.onscroll = function () {
        if (!blockHandler) {
            blockHandler = true;

            // I've used 50 here, but calc the offset of your nav
            // and add the height to it.  Or, maybe just half the
            // height to it so you can see the animation.
            if ($wnd.scrollTop() < 50) {
                $nav.fadeIn(500, function () {
                    blockHandler = false;
                });
            } else {
                $nav.fadeOut(500, function () {
                    blockHandler = false;
                });
            }
        }
    };

</script>
于 2013-02-21T17:17:48.030 に答える