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

Question

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

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

Каждый раз, когда пользователь нажимает, чтобы загрузить карту, я запускаю следующую 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() происходил после одного из них last , затем проверьте, все ли еще анимация с .is() и селектором :animated , например:

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

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