要素がアニメーション化されているかどうかをjQueryで確認するにはどうすればよいですか?


101

ページ上のいくつかの要素を移動しようとしています。アニメーションが発生している間、要素に「overflow:hidden」を適用し、アニメーションが完了したら「overflow」を「auto」に戻したいと思います。

jQueryに、いくつかの要素がアニメーション化されているかどうかを判断するユーティリティ関数があることを知っていますが、ドキュメントのどこにも見つかりません

回答:


199
if( $(elem).is(':animated') ) {...}

詳細https : //api.jquery.com/animated-selector/


または:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };

はい、ありがとうございます。どうすれば見逃すことができますか?くそー、私は

参考までに、コールバックで「overflow:auto」をプログラミングしてCSSスタイルを上書きするリスクを負いたくない場合は、単にを使用してください.css('overflow', '')。空の文字列を渡すと、通常、そのプロパティは要素のスタイルから完全に削除されます。これが文書化された動作かどうかはわかりませんが、非常に便利なトリックです。
Ward DS

2
CSSアニメーションはサポートされていないと思います。
Gqqnbig 2017年

5

または、アニメーション化されていないものがあるかどうかをテストするには、「!」を追加するだけです。

if (!$(element).is(':animated')) {...}

これは非常に真実ではありません... jqueryの反対は「is」は「not」ではありません。'not'はjqueryオブジェクトからフィルターされた要素を削除します。アニメーション化されていないオブジェクトをチェックしたい場合if (!$(element).is(':animated')) {...}
amosmos

1
@amosmos回答が編集され、コミュニティによって承認されました。正しいところにロールバックしました。
ビル

2
素晴らしい、今だけは受け入れられた答えの複製です。ところで、コミュニティが承認したとはどういう意味ですか?
amosmos

@amosmosはトローリングを停止します
Eric Cicero

1

cssアニメーションを使用していて、特定のを使用してアニメーションを割り当てる場合はclass name、次のように確認できます。

if($("#elem").hasClass("your_animation_class_name")) {}

ただし、アニメーションが終了したら、アニメーションを処理しているクラス名を必ず削除してください。

このコードを使用してclass name、アニメーションの終了後にを削除できます。

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});

OPはjQueryアニメーションを使用しています。
のMichałPerłakowski

代替案を提案するだけです。そして、あなたはアニメーションを意味しましたか?
Ari

はい、私はアニメーションを意味しました。IMOあなたの答えは完全にトピックから外れています。
のMichałPerłakowski


0
$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});

このコードは質問に答えることがありますが、問題を解決する方法および/または理由に関する追加のコンテキストを提供すると、回答の長期的な価値が向上します。質の高い回答を提供するにはこの回答方法をお読みください。
thewaywereは
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.