jquery停止animate

jQuery は Web 開発で広く使用されている JavaScript ライブラリであり、その柔軟なアニメーション機能により、Web サイトのユーザー エクスペリエンスを効果的に向上させることができます。実際の開発では、多くの開発者が実行中のアニメーションを停止する必要がある状況に遭遇したことがあります。この記事ではjQueryのアニメーション効果を停止する方法を紹介します。

1. stop() メソッドを使用する

jQuery には stop() メソッドが用意されており、これを使用して進行中のアニメーション効果を停止できます。このメソッドの構文は次のとおりです:

$(selector).stop(stopAll, gotoEnd);

このうち、セレクターはアニメーション化する要素です。stopAll はオプションのパラメーターで、進行中のすべてのアニメーション効果を停止するかどうかを指定します (デフォルト値は false です)。 、つまり、現在のアニメーションを停止するだけです); gotoEnd は、アニメーション効果を停止する場所を指定するために使用されるもう 1 つのオプションのパラメーターです (デフォルト値は false で、現在の位置で停止することを意味します)。

以下は、実行中のアニメーションを停止する方法を示す簡単な例です:

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop();
    });
});

この例では、ユーザーがボタンをクリックすると、ID が「box」の要素が An 5 秒間続き、左に移動するアニメーション効果。ユーザーが ID が「stop」の要素をクリックすると、アニメーションが停止します。

2.clearQueue() メソッドを使用する

stop() メソッドに加えて、jQuery は要素のキューをクリアするための clearQueue() メソッドも提供します。通常、アニメーション効果が停止されると、キュー上のすべてのアニメーションがクリアされます。ただし、現在のアニメーションを停止したくないが、他のアニメーション効果をクリアしたい場合は、clearQueue() メソッドが非常に役立ちます。

このメソッドの構文は次のとおりです。

$(selector).clearQueue(queueName);

このうち、queueName は、クリアするキューの名前を指定するために使用されるオプションのパラメーターです。このパラメータが指定されていない場合、デフォルト キューのすべてのアニメーション効果がクリアされます。

次の例は、アニメーションを停止するときに現在のアニメーション以外の他のアニメーション効果をクリアする方法を示しています:

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
        $("#box").animate({top: '100px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop(false, true).clearQueue();
    });
});

この例では、ユーザーがボタンをクリックすると、ID は次のようになります。 「ボックス」要素のアニメーション効果を実行して、最初に左に移動し、次に下に移動します。ユーザーが ID が「stop」の要素をクリックすると、下向きの動きのアニメーションは停止しますが、左向きの動きのアニメーション効果は保持されます。同時に、他のアニメーション効果もクリアされます。

概要:

実行中のアニメーション効果を停止したい場合は、stop() メソッドを使用できます。アニメーションの停止時にキュー内の他のアニメーション効果をクリアしたい場合は、 ClearQueue()メソッドを使用できます。実際の開発では、目的を達成するために必要に応じてさまざまな方法を選択します。

以上がjquery停止animateの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。