jQueryで画像の動きを止める

jQuery は、インタラクティブな Web アプリケーションの開発で広く使用されている人気のある JavaScript ライブラリです。一般的な用途の 1 つは、画像などの Web ページ上の要素をアニメーション化して移動することです。ただし、ユーザーがページ上の要素を操作するときなど、進行中の画像移動アニメーションを停止する必要がある場合があります。

この記事では、進行中の画像の動きのアニメーションを停止する方法とテクニックをいくつか紹介します。

方法 1: stop() 関数を使用する

jQuery では、stop() 関数を使用して、進行中のアニメーションまたはエフェクトを停止できます。 2 つのオプションのパラメータを受け入れます。1 つ目はアニメーション キューをクリアするかどうかを示すブール値で、2 つ目は現在のアニメーションを完了するかどうかを示すブール値です。これらのパラメータを省略すると、デフォルトでキューがクリアされ、現在のアニメーションが完了します。

画像移動アニメーションで stop() 関数を使用するには、次の手順に従ってください:

1. jQuery を通じて選択および制御できるように、画像にクラスまたは ID を追加します。 。

2. 画像の動きのアニメーションを作成し、コードビハインドで使用できるように変数に保存します。

var imageAnimation = $('#picture').animate({left: '+=200px'}, 2000);

3. stop() 関数を使用してアニメーションを停止します。

imageAnimation.stop();

完全なコード例:

$('#button').click(function() {
  var imageAnimation = $('#picture').animate({left: '+=200px'}, 2000);
  imageAnimation.stop();
});

この例では、ボタンをクリックすると、画像が左から右に 200 ピクセル移動し、アニメーションが 2 秒間続きます。ただし、ボタンクリックハンドラー内で stop() 関数が呼び出されるため、アニメーションはすぐに停止します。

方法 2: clearQueue() 関数を使用する

clearQueue() 関数は、1 つ以上の要素のアニメーション キューをクリアするために使用されます。この関数を stop() 関数とともに使用すると、アニメーションが停止後に再開されないようにすることができます。保留中の操作も含め、キュー全体のすべての操作がクリアされます。この関数にはパラメータは必要ありません。

画像移動アニメーションで clearQueue() 関数を使用するには、次の手順に従ってください:

1. jQuery を通じて選択および制御できるように、画像にクラスまたは ID を追加します。

2. 画像の動きのアニメーションを作成し、コードビハインドで使用できるように変数に保存します。

var imageAnimation = $('#picture').animate({left: '+=200px'}, 2000);

3. stop() 関数を使用してアニメーションを停止し、clearQueue() 関数を使用してキューをクリアします。

imageAnimation.stop().clearQueue();

完全なコード例:

$('#button').click(function() {
  var imageAnimation = $('#picture').animate({left: '+=200px'}, 2000);
  imageAnimation.stop().clearQueue();
});

この例では、ボタンをクリックすると、画像が左から右に 200 ピクセル移動し、アニメーションが 2 秒間続きます。アニメーションが停止するとキューがクリアされ、アニメーションが繰り返されなくなります。

方法 3:jumpy() 関数を使用する

jumpy() 関数は、jQuery 拡張ライブラリによって提供される関数で、要素上のアニメーションを停止し、要素にジャンプするために使用されます。すぐにターゲットの場所を指定します。この関数は、アニメーションが非常に長い場合、またはユーザー操作の直後にアニメーションを停止する必要がある場合に役立ちます。

画像移動アニメーションで Jumpy() 関数を使用するには、次の手順に従ってください:

1. jQuery を通じて選択および制御できるように、画像にクラスまたは ID を追加します。 。

2. 画像の動きのアニメーションを作成し、コードビハインドで使用できるように変数に保存します。

var imageAnimation = $('#picture').animate({left: '+=200px'}, 2000);

3. Jumpy() 関数を使用してアニメーションを停止し、要素をターゲット位置に即座にジャンプします。

imageAnimation.jumpy();

完全なコード例:

$('#button').click(function() {
  var imageAnimation = $('#picture').animate({left: '+=200px'}, 2000);
  imageAnimation.jumpy();
});

この例では、ボタンをクリックすると、画像が左から右に 200 ピクセル移動し、アニメーションが 2 秒間続きます。アニメーションが停止すると、画像はただちにターゲット位置にジャンプします。

概要

jQuery は、要素に対するアニメーションや動きの効果を簡単に制御できるため、Web 開発において非常に役立ちます。ただし、ユーザーがインターフェイス上の要素を操作するときは、アニメーションがユーザーの気を散らしたり、ユーザー エクスペリエンスに影響を与えたりしないように、アニメーションを確実に停止できるようにすることが重要です。これを行うには、stop()、clearQueue()、または Jumpy() 関数を使用して、画像の移動アニメーションを制御します。

これらの関数を使用するときは、他の要素や相互作用に影響を与えないように注意してください。さらに、適切なレイアウトと応答技術を使用して、さまざまなデバイスやプラットフォーム間でページが使用可能でアクセスできるようにすることもできます。

以上がjQueryで画像の動きを止めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。