jqueryでのstop()の使用

目的: stop() の使用法を理解するために、例を挙げて直感的に見てみましょう。

実際のオブジェクト: id="animater" の p にはテキストが含まれます。 (アニメーターは、以下の実際のオブジェクトを表すために使用されます)

アニメーションの最終的な完全な効果: アニメーターは右に 800 ピクセル移動し (この完全なプロセスはアニメーション 1)、その後、フォントが移動します。徐々に大きくなり（この完全なプロセスはアニメーション 2）、その後、透明度は徐々に 0 に減少し（この完全なプロセスはアニメーション 3）、その後、透明度は徐々に 1 に戻ります（この完全なプロセスはアニメーション 4）。左の境界線 200 ピクセルの位置から移動すると、 16 ピクセルになります (この完全なプロセスはアニメーション 5 です)。 操作: 異なる ID のボタンをクリックして効果を確認します。

HTMLコード:

       <p id="animater">
            stop()方法测试        </p>

        <p id="button">
            <input type="button" id="button1" value="stop()"/>
            <input type="button" id="button2" value="stop(true)"/>
            <input type="button" id="button3" value="stop(false,true)"/>
            <input type="button" id="button4" value="stop(true,true)"/>
            
        </p>

CSSコード:

         #animater{
                width: 150px;
                background:activeborder;
                border: 1px solid black;                /*为了移动，需设置此属性*/
                position: relative;
            }

jクエリコード:

              //            为了看效果，随意写的动画
                $('#animater').animate({                    'right':-800
                }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');        
                //           点击不同的button执行不同的操作        
                $('#button1').click(function(){                    //默认参数是false，不管写一个false还是两个false还是没写false效果一样
                    $('#animater').stop();
                });
                $('#button2').click(function(){                    //第二个参数默认false
                    $('#animater').stop(true);
                });
                $('#button3').click(function(){
                    $('#animater').stop(false,true);
                });
                $('#button4').click(function(){
                    $('#animater').stop(true,true);
                });

W3School には次の説明があります:

stop(
stopAll

,

goToEnd

)

Parameters

Description

すべて停止オプション。現在のアニメーションの完了を許可するかどうかを指定します。

	はい選択してください。選択した要素のキューにあるすべてのアニメーションを停止するかどうかを指定します。
goToEnd
このパラメータは、stopAll パラメータが設定されている場合にのみ使用できます。	私の理解: stopAll が false の場合、キューに追加された選択された要素のすべてのアニメーションは停止されず、現在のアニメーションのみが停止されます。 stopAll が true の場合、キューに追加されたすべてのアニメーションを停止します (goToend が true の場合、現在のアニメーションの最終エフェクトに直接ジャンプします)。 goToend が false の場合、現在のアニメーションの最終エフェクトに直接ジャンプすることはできません (goToend が true の場合、 はいわゆる現在のアニメーションの完了である必要があります)。 、現在のアニメーションの完了に直接ジャンプすることができます ページを実行してアニメーターが移動するたびに、別のボタンをクリックすると、次のさまざまな効果が表示されます。 (アニメーターがアニメーション 1 にいるときにクリック): ボタン button1 (stop( )) をクリックします。両方のパラメーターが false であるためです。したがって、クリックが発生すると、アニメータは現在のアニメーションの最終エフェクト (アニメーション 1) にジャンプせず、直接アニメーション 2 に入り、アニメーション全体が完了するまでアニメーション 3、4、および 5 を続けます。 ボタン button1 (stop(true)) をクリックします。最初のボタンが true、2 番目のボタンが false であるため、アニメーターはすべて即座に停止し、アニメーションの動きが停止します。 ボタン button1 (stop(false,true)) をクリックします。最初のボタンは false、2 番目のボタンは true であるため、クリックが発生すると、アニメーターの現在のアニメーション (アニメーション 1) が停止し、アニメーターは直接ジャンプします。現在のアニメーション (アニメーション 1) の最終エンド エフェクトの位置を決定し、アニメーション全体が完了するまで次のアニメーション (アニメーション 2、3、4、5) を通常どおり実行します。 ボタン button1 (stop(true, true)) をクリックします。両方が true であるため、クリックが発生すると、アニメーターは現在のアニメーション (アニメーション 1) の最後のエンドエフェクト位置にジャンプし、その後すべてのアニメーションが停止します。 私が実際に仕事で遭遇した事例: プロジェクトにドロップダウンメニュー を作成しました。マウスを上に動かすとメニューが表示され、マウスを離すとメニューが表示されます。 hidden マウスをメニューの内外に素早く移動すると (つまり、メニューのドロップダウン アニメーションが完了していない場合、マウスがメニューの外に移動すると)、「アニメーションの蓄積」が生成されます。マウスの動きが停止すると、アニメーション シーケンスが終了するまで、蓄積されたアニメーションが実行され続けます。 解決策: アニメーションエフェクトコードを記述する前に stop( true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置） を追加します)

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