Question

我正在使用jquery的翻转插件。我想翻转一张卡片（div），在完成翻转之后，立即将其翻转。我试过的：

$("#flipbox").bind("click",function(){
        $(this).flip({
            direction:'tb',
            onEnd: function() {
                $(this).revertFlip();
                console.log('when the animation has already ended');

            }
        })
    }

你知道吗？

感谢。

Answer 1

这里有两个问题需要考虑。当onEnd被调用以及revertFlip()如何运作时。

动画结束时

onEnd会触发，但不会在函数逻辑结束时触发，这意味着对revertFlip()的调用不会触发！

revertFlip()还有onBefore，onAnimation和最重要的onEnd事件，这意味着简单的还原将无限循环。

要解决第一个问题，只需设置超时/延迟。

要修复第二个问题，可以使用布尔值。

$("#flipbox").bind("click",function(){
    var flip=true;
    $this=$(this);
    $this.flip({
        direction:'tb',
        onEnd:function(){
            if(flip){
                flip=false;
                setTimeout(function(){$this.revertFlip();},200);
            }
        }
    });
});

这是一个example on jsfiddle。

Answer 2

看来你的插件调用回调有点太早，无法正确处理revertFlip。我在这里看到的唯一简单的解决方法是为插件提供所需的时间......

这确实有效：

var flag = false;
$('#flip').flip({
    direction: 'tb',
    onEnd: function() {
        if(!flag) {
            // 400ms should do the trick.
            setTimeout(function(){ $('#flip').revertFlip(); }, 400); 
            flag = true;
        }
    }
 });

flag内容的目的是防止onEnd上的无限递归回调。

如何revertFlip两张不一样的牌？

2 个答案: