jquery FadeOut for a Class, Runs Multiple Times, instead of Simultaneously, y?

Question

I have a page with the several divs like:

By default all are display:none, and I let the user click to show a certain card.

Every time the user clicks to load a card I run the following JQUERY:

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

What's surprising me is that the alert above is happening 5 times, not 1 time. Meaning the fadeOut isn't running Simultaneously but looping over all the card items. This makes for a ugly animation that blinks. How can I get fadeout for all the matching classes to run at the same time? Or just run on the classes that have divs that are displaying, which should only be 1 card?

Thanks!

Answer 1

If you take out the alert which is stopping the animations (causing an offset start), it'll behave as expected, at least in terms of the initial animations being simultaneous.:

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

Each element does animate independently, if you want the .fadeIn() to happen after the last one of them, then check if any are still animating with .is() and the :animated selector, like this:

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

The :visible addition to the selector is so that only visible ones are faded out, rather than showing/fading all of them.