使用jQuery翻轉，無法恢復翻轉起火

Question

早上好！以下是（我不知道最好的）使用jQuery插件Flip!的jQuery代碼。原來的翻轉火很好，但恢復翻轉不會爲我的生活發揮作用。我試過很多不同的東西，但都沒有成功。這是我目前擁有的。

任何幫助將不勝感激！

$('.flip1').bind("click",function(){ 
     var elem = $(".toflip"); 
     if(elem.data('flipped')){ 
      elem.revertFlip(); 
      elem.data('flipped',false) 
     } else { 
      elem.flip({ 
       direction:'lr', 
       dontChangeColor: true, 
       onBefore: function(){ 
        elem.html(elem.siblings('#flip1Data').html()); 
       } 
      }); 
      elem.data('flipped',true); 
     } 
    }); 
    $('.flip2').bind("click",function(){ 
     var elem = $(".toflip"); 
     if(elem.data('flipped')){ 
      elem.revertFlip(); 
      elem.data('flipped',false) 
     } else { 
      elem.flip({ 
       direction:'lr', 
       dontChangeColor: true, 
       onBefore: function(){ 

        elem.html(elem.siblings('#flip2Data').html()); 

       } 
      }); 
      elem.data('flipped',true); 
     } 
    }); 
    $("#flip1back").bind("click",function(){ 
     $('.toflip').revertFlip(); 
     return false; 
    }); 
    $("#flip2back").bind("click",function(){ 
     $('.toflip').revertFlip(); 
     return false; 
    }); 

Answer 1

以下代碼執行左轉和右轉。如果您想更改翻轉方向，只需更改JS代碼上的direction屬性即可。不要忘記上傳必要的JS文件到你的文件夾中（你可以在HTML代碼的底部看到它們）。這是鏈接到working example。

CSS：

.button { 
    display:inline-block; 
    padding:10px; 
    color:#fff; 
    cursor:pointer; 
    margin-top:40px; 
} 
.button#left { 
    background-color:green; 
} 
.button#revert { 
    background-color:red; 
    display:none; 
} 
#flipbox { 
    width: 500px; 
    height: 200px; 
    line-height: 200px; 
    background-color: #ff9000; 
    font-family: 'ChunkFive Regular', Tahoma, Helvetica; 
    font-size: 2.5em; 
    color: #ffffff; 
    text-align: center; 
} 

HTML：

<div id="flipbox">front content</div> 
<div class="button" id="left">left</div> 
<div class="button" id="revert">revert</div> 


<!-- JavaScript at the bottom for fast page loading --> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jqueryui.min.js"></script> 
<script type="text/javascript" src="jquery.flip.min.js"></script> 

<script type="text/javascript"> 
    $(function(){ 

     $("#left").bind("click",function(){ 
      var $this = $(this); 
      $("#flipbox").flip({ 
       direction: "rl", 
       color: "#39AB3E", 
       content: "back content", 
       onBefore: function(){$("#revert").css('display','inline-block');} 
      }) 
      return false; 
     }); 

     $("#revert").bind("click",function(){ 
      $("#flipbox").revertFlip(); 
      return false; 
     }); 

    }); 
</script> 

編輯

撤銷按鈕只顯示後第一次離開翻轉：有沒有辦法恢復倒裝如果你還沒有做到這一點:)代碼和工作國王的例子是最新的。