jQuery“:animated”はセレクターは、fadeIn()およびfadeOut()を使用するアイテムと一致しますか?
質問
アニメーションの実行中にリストアイテムがクリックされないようにしています。そこで、クリックハンドラーの一番上で、次のようなことをしたいと思います。
if(!$(this).is(:animated)) {
// handle click code here
}
上記のifステートメントの 'bang'(!)に注意してください。私はテストしていませんが、これはうまくいくと思います。私が確信していないのは、fadeIn()およびfadeOut()でアニメーション化されている要素に対して実行されたときに '.is(:animated)'がtrueを返すかどうかです。 jQueryには.animate()関数があり、:animatedはその関数を使用してアニメーション化された要素に対して確実に機能すると仮定していますが、fadeIn()およびfadeOut()を使用する要素では機能しますか?ありがとう。
更新:劇的な誤投稿の後、すべてが順調になり、すばらしいフォローアップと編集を行ってくれたレスポンダーのおかげです。最終的に、jQueryソースは.animate()を使用してこれらの効果を実現するため、:animatedはfadeIn()およびfadeOut()を使用してアニメーション化された要素と一致することがわかりました。私の最後のチェックは最初に投稿されたとおりでした:
<*>... not()を使用するのではなく、いくつかの例で提案されています(これらは現在投稿されているように機能すると思います)。どうもありがとう。
解決
はい、:animated
はjQueryが作成するあらゆる種類のアニメーションに対してtrueを返します。また、jQueryの animate
関数を使用する場合、アニメーション化するプラグインに対しても実行されます。
ただし、jQueryを利用するために、ほんの少しだけコードを書くことができます。
編集 not
関数は、 is
の反対ではありません。ノードを除外しますが、 true
と評価されるjQueryオブジェクトを返します。最初に提案したように not
関数を使用するには、テストに .length
を追加する必要があります。
if( $(this).not(':animated').length ) {
// Handle click code here
}
それ以外の場合は、OPが最初に投稿されたとおりに関数を使用します:
if( !$(this).is(':animated')) {
// Handle click code here
}
他のヒント
:animate
は、 fadeOut
が呼び出された要素と一致します。
jQueryソースを見ると、 fadeOut
は単に animate
を呼び出していることがわかります。
次のように定義されています:
// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx("show", 1),
slideUp: genFx("hide", 1),
slideToggle: genFx("toggle", 1),
fadeIn: { opacity: "show" },
fadeOut: { opacity: "hide" }
}, function( name, props ){
jQuery.fn[ name ] = function( speed, callback ){
return this.animate( props, speed, callback );
};
});
そこにifステートメントを含める必要はまったくありません。 「クリックコード」の前に.not( ':animated')をチェーンできます。
例として、これらのフェードは、divがアニメーション化されていない場合にのみ機能するため、厄介なキューの問題を取り除きます。
$('a#show_me').toggle(function() {
$('div#the_money').not(':animated').fadeIn();
}, function() {
$('div#the_money').not(':animated').fadeOut();
});
.click()でも同様に機能します。