Question

我尝试遍历我的所有卡片，如果其中一张卡片的健康状况低于0，那么我想添加一个隐藏效果并转换到该卡片。问题是，当有几张牌的生命值为0时（内部HTML中的最后一个牌是牌的生命值），一张牌的隐藏效果会取消其他牌。效果只发生在一张卡片上。这是我获取所有卡后运行的代码：

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

使用css转换可能更好吗？

像;

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;
}

我不确定它是否正是您所追求的/它是否适合您的使用案例，所以请告诉我！

Answer 2

而不是hide（），您可以使用animate（）然后禁用队列属性。见How to run two jQuery animations simultaneously?

使用过渡同时删除多个div

2 个答案: