jquery - 下にスクロールした後、Divがスライドインします

Question

これが私のコードです http://jsfiddle.net/mihaene/7bdkB/

一定量のピクセルを下にスクロールしたらすぐに、divをスライドさせたいです。動作しますが、非常に遅れます（5秒など）。どうしたの？

任意の提案をいただければ幸いです。

Answer 1

こんにちは、問題はelseブロックだと思います。jQuery はアニメーションを開始しますが、これには約 300 ミリ秒かかります。

var $test2 = $(".test2");
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $test2.stop().animate({left: "200px"}, 300);
    } else {
        $test2.stop().animate({left: "-90px"}, 300);
    }
});

したがって、jQuery の stop() メソッドを使用して、これらのアニメーションを停止します。

余談ですが、他の提案のように、すべてのスクロール イベントでアニメーション (または停止 / 再起動) を取得しないようにするために、さまざまな if / else ステートメントを考える必要があるかもしれません。

Answer 2

これは私が考えることができる最善の解決策です。間違っている場合は修正してください。

イベントは積み重ねられ、次々に発生します。したがって、私の解決策は、それらをキューに保持し、必要に応じてキューをクリアすることです。

キューを使用しました

デモ

お役に立てれば

Answer 3

あなたのjsfiddleの例には遅延の問題はありませんが、それはおそらくウィンドウサイズが小さく、スクロールして起動する機会があまりないためです. 遅延の考えられる原因は、スクロール機能の起動頻度です。それらはすぐに積み重なり、遅延を引き起こす可能性があります。

console.log を追加し (Firebug を使用している場合)、コンソールで頻度を確認して、頻度をよりよく理解します。