jqueryのホバーはキャンセルされてから実行されます

Web デザインでは、さまざまな効果を実現するために JavaScript ライブラリの jQuery がよく使用されます。中でもホバーイベントはよく使われるイベントで、マウスホバー時の特殊効果を実現できます。ただし、特定の特殊効果を実装する場合は、ホバー イベントで前の操作をキャンセルしてから、新しい操作を実行する必要があります。では、jQuery でホバーをキャンセルして実行するにはどうすればよいでしょうか?

1. ホバーイベントの基本的な使い方

jQuery では、ホバーイベントの使い方は非常に簡単で、次のコードを使用するだけです:

$('selector').hover(function() {
  // 如果想要执行的操作
}, function() {
  // 如果想要取消的操作
});

その中でセレクターとは、最初の関数は、要素の上にマウスを置いたときに実行されるアクションを表し、2 番目の関数は、マウスが要素の外に移動したときに実行されるアクションを表します。

2. ホバーをキャンセルした後に実行する

場合によっては、ホバー イベントで前の操作をキャンセルし、その後新しい操作を実行する必要があります。一般的なシナリオは、ユーザーがマウスを素早く動かすと、前の操作をキャンセルしてから新しい操作を実行する必要があるというものです。現時点では、jQuery の stop() メソッドと late() メソッドを使用してこれを実現できます。

stop() メソッドは現在実行中のアニメーションやエフェクトを停止するために使用され、delay() メソッドは操作の実行を遅らせるために使用されます。これら 2 つのメソッドを組み合わせることで、実行中の効果を実現できます。ホバー後の操作はキャンセルされます。

次はコード例です:

var timeoutId;
$('selector').hover(function() {
  // 如果想要执行的操作
  $(this).stop().animate({ width: '100px' }, 500);
  clearTimeout(timeoutId);
}, function() {
  // 如果想要取消的操作
  timeoutId = setTimeout(function() {
    $(this).stop().animate({ width: '50px' }, 500);
  }, 500);
});

このコードでは、timeoutId 変数を使用してタイマー ID を保存します。マウスが要素の外に出たら、タイマーを設定して、 500ms の操作後に縮小が開始されますが、この期間中に再度マウスが要素に入るとタイマーがクリアされ、ズーム操作が実行されます。

3. 概要

jQuery でホバー イベントのキャンセルと再実行を実装するには、正常なキャンセルを保証できる stop() メソッドと late() メソッドを組み合わせて使用​​する必要があります。マウスが速く動いた場合は、前の操作を行ってから、新しい操作を正しく実行してください。この方法は Web デザインでは非常に一般的であり、より多くの蓄積と練習が必要です。

以上がjqueryのホバーはキャンセルされてから実行されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。