如何恢復兩張卡片的翻轉不一樣？

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無限遞歸回調。