0

「サイトの上部に」テキストを表示する＃top-divがあります。次のコードを実行すると、「else」がなくても機能します。700pxをスクロールすると、divが表示されます。

ただし、「else」は機能せず、まったく表示されません。サイトの一番上までスクロールすると、divが非表示になります。

助けていただければ幸いです。

$(window).scroll(function() {
    scrollet = $(window).scrollTop();
    if(scrollet > 700) {
        $("#top").animate({"opacity":"0.6"});
    }
    else {
        $("#top").animate({"opacity":"0"});
    }
4

1 に答える 1

1

700pxの境界を越えて前後にスクロールすると、アニメーションエフェクトがキューに入れられたため、アニメーションが意図したとおりに機能していないのではないかと思われます。

アニメーションを使用するときは、jQueryに「今行っていることを削除し、アニメーションキューを停止して、今言われているとおりに実行する」ように指示することが重要です。つまり、メソッドの.animate背後にチェーンする必要があります（ .stop（）について読んでください）。.stop

$(window).scroll(function() {
    scrollet = $(window).scrollTop();
    if(scrollet > 700) {
        $("#top").stop(true, false).animate({"opacity":"0.6"});
    }
    else {
        $("#top").stop(true, false).animate({"opacity":"0"});
    }
}

この.stop(true, false)メソッドは、jQueryにアニメーションキューを強制的にクリアさせますが、要素をアニメーションの最後にジャンプさせることは強制しません。これは.scroll()、ユーザーがスクロールしたときにイベントが複数回発生するためです。使用する場合.stop(true, true)、遷移は突然になります。

代替案は次のとおりです。

  • .scroll()イベントのデバウンスまたはスロットル
  • を使用しないでください.animate()。CSSを使用して不透明度を設定し、CSSトランジションを利用してくださいtransition: opacity .25s ease-in-out。

これが概念実証フィドルです-http://jsfiddle.net/teddyrised/zdpMd/

于 2013-03-24T11:52:11.943 に答える