Remove multiple divs at the same time using transitions

Question

I try to loop through all my cards and if the health of one of the cards is below 0 then I want to add a hide effect with a transition to that card. The Problem is that When there are several cards under 0 health (the last character in their innerHTML is the card's health), the hide-effect for one card cancels out the others. The effect only happens for one card. This is the code I run after all cards are fetched:

function destroydead(){
    $('.card').each(function(i){
        if ($(this).is(':empty')){

        }else{
            var stats = $(this).find(".attdef").html();
            if(parseInt(stats.slice(-1)) <= 0){
                $(this).hide(1000);
            }
        }               
    });
}

Answer 1

It might be better to use css transitions instead?

Like;

http://jsfiddle.net/wzvt98jq/

JS

$('.card').each(function(i){
        var stats = $(this).html();
        if(stats <= 0){
            $(this).addClass('out');
        }    
});

CSS

.out {
  opacity: 0;
  transition: opacity 1s;
  transition-timing-function: ease-out;
}

I'm not sure if it's exactly what you're after / if it is adaptable to your use case, so just let me know!

Answer 2

instead of hide() you can use animate() and then disable the queue attribute. see How to run two jQuery animations simultaneously?