views:

28

answers:

1

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!

+1  A: 

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.

Nick Craver
For some reason that display and then fadesOut
AnApprentice
@nobosh - You can add `:visible` for that, one moment and I'll update.
Nick Craver
Strange, it still fadesIn then out
AnApprentice
Is visible supported like used above in the latest JQUERY?
AnApprentice
@nobosh - Yep, it's been around for some time...are you using `display` or `visibility` when hiding the elements? `.fadeOut()` will set `display: none;` when it's done, but is there something else going on outside the question?
Nick Craver