title: jquery FadeOut for a Class, Runs Multiple Times, instead of Simultaneously, y?
body: <p>I have a page with the several divs like:</p>
  
   
  
   
  
   
  
   
  
   
  
  <p>By default all are display:none, and I let the user click to show a certain card.</p>
  
  <p>Every time the user clicks to load a card I run the following JQUERY:</p>
  
  <pre><code>$('.carditem').fadeOut( function() {alert(1)
  // Animation complete show correct card
  $('#' + toogleID).fadeIn();
  });
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks!</p>