如何恢复两张卡片的翻转不一样？

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无限递归回调。