1

私は次のようないくつかのdivを持つページを持っています：

デフォルトではすべてdisplay：noneであり、ユーザーがクリックして特定のカードを表示できるようにします。

ユーザーがクリックしてカードをロードするたびに、次のJQUERYを実行します。

$('.carditem').fadeOut( function() {alert(1)
// Animation complete show correct card
$('#' + toogleID).fadeIn();
});

私が驚いたのは、上記のアラートが1回ではなく、5回発生していることです。つまり、fadeOutは同時に実行されていませんが、すべてのカードアイテムをループしています。これにより、点滅する醜いアニメーションが作成されます。一致するすべてのクラスを同時に実行するためにフェードアウトを取得するにはどうすればよいですか？または、表示されているdivがあるクラスで実行します。これは、1枚のカードのみである必要がありますか？

ありがとう！

4

1 に答える 1

2

アニメーションを停止している（オフセット開始を引き起こしている）アラートを削除すると、少なくとも最初のアニメーションが同時であるという点では、期待どおりに動作します。

$('.carditem:visible').fadeOut( function() {
  $('#' + toogleID).fadeIn();
});

各要素は独立してアニメーション化されます。最後.fadeIn()の要素の後にアニメーション化する場合は、次のように、セレクターでアニメーション化されているものがあるかどうかを確認します。.is():animated

$('.carditem:visible').fadeOut( function() {
  if(!$('.carditem').is(':animated')) //are any still animating?
    $('#' + toogleID).fadeIn();
});

セレクターへの:visible追加は、それらのすべてを表示/フェードするのではなく、表示されているものだけがフェードアウトするようにすることです。

于 2010-07-17T15:35:00.083 に答える