JQuery FadeOut для класса, запускается несколько раз, а не одновременно, у?

Question

У меня есть страница с несколькими div, как:

По умолчанию все отображается: нет, и я позволяю пользователю щелкнуть, чтобы показать определенную карту.

Каждый раз, когда пользователь нажимает, чтобы загрузить карту, я запускаю следующую JQUERY:

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

Что меня удивляет, так это то, что оповещение выше происходит 5, а не 1 раз. Это означает, что fadeOut не работает одновременно, а зацикливается на всех элементах карты. Это делает уродливую анимацию, которая мигает. Как я могу получить fadeout для всех соответствующих классов для одновременного запуска? Или просто запустите классы с отображаемыми элементами div, которые должны содержать только одну карту?

Спасибо!

Answer 1

Если вы отключите предупреждение, которое останавливает анимацию (вызывая начало смещения), оно будет работать так, как ожидалось, по крайней мере, с точки зрения одновременной начальной анимации.

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

Каждый элемент анимируется независимо, если вы хотите .fadeIn()произойдет после последнего из них, а затем проверьте, все ли еще анимация с .is() и :animated селектор, вот так:

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

:visible дополнение к селектору таково, что только видимые исчезают, а не отображаются / исчезают все.