Question

通过在aces上随机点击，向你的“手”添加16张牌。然后，通过单击手中要从手中删除的卡片随机删除卡片。全部删除它们。随意删除。跟踪您正在进行的点击次数。每转几圈，只需少于16次点击即可从手中取出所有卡片 - 不时地，只需点击一下即可移除2张卡片。

http://jsfiddle.net/7z7kP/4/

我的代码中是否存在我忽略的错误？

self.afterAdd = function(element) {         
    var el = $(element);            
    el.addClass( el.text() );
    el.click( function(event) {
        el.animate({width: 0, height: 0}, 222, function() {
            self.hand.splice(el.index(),1);
        });
    });
};

Answer 1

当2张牌消失时，我可以安全地重现：双击任何一张牌，你手上会得到两张牌（正如预期的那样）。但它们似乎共享相同的点击处理程序，因此两者都是动画的，但只有一个从您的手中移除（observableArray）。

删除动画后，此行为不再发生，因此我认为有一些令人讨厌的事情发生。

self.afterAdd = function(element){         
    var el = $(element);            
    el.addClass( el.text() );
    el.click( function(event) {
        var idx = el.index();
        self.hand.splice(idx,1);
    });
};

我想给你一个很好的CSS3 based solution隐藏动画（通过一个简单的el.addClass("hide");），但是没有按预期的那样运作。两张牌再次消失，但随后又重新出现。 -.-

.hide {
  -webkit-animation: hidecard 1s;
}

@-webkit-keyframes hidecard {
    0% { height: 0; width: 0; opacity: 1; }
    100% { height: 0; width: 0; opacity: 0; display:none; }
}

为什么这个淘汰foreach绑定jQuery调整大小动画不可靠？

1 个答案: