jQuery ScrollTop：次のアニメーションにジャンプする前に各アニメーションを終了する必要があります

Question

scrollTopを使用するライブ検索プラグインを使用して、ページ上に見つかったテキストをスクロールします。 コードでキーボードの矢印キーupとdownを使用して結果を選択すると、唯一の問題は、scrollTopのアニメーション時間のために、前のアクションの結果が達成される前に最後のアクション結果が達成されないことですコードで指定されているアニメーション時間の後。

downキーを連続して何度も押すと、ページ上に最後のアイテムが見つかった後に10回と言いましょう。すぐにupキーを押しても、最後の10個のイベントが実行されるまで待ってから、upキーを使用する最後のイベントを実行します。

$('html,body').animate({scrollTop: mark.offset().top-100}, 100); 

Working Fiddle

は前のイベントをキャンセルし、キーはアニメーションが起こっていると同時に押された場合は、次のいずれかにジャンプすることがとにかくありますか？

Answer 1

私は今、ラグを参照してください[OK]を、あなたは最初にjQueryを使ってキューを作成する必要があります、その後明確なそれ検索はして方向を変更した場合：

$(element).clearQueue(); 

私はあなたが説明したラグ効果を再作成することができませんでした。しかし、これを達成するために使用できるアニメーションのjqueryには関数があります。

$(element).stop() 

私は新しいもの、hereを開始する前に、以前のアニメーションを停止するには、あなたのjsFiddleを更新しました。

.stop()hereについてさらに読むことができます。