flippy jquery效果不正確旋轉

Question

我有一個jQuery插件翻轉效果的問題。當圖片旋轉它不能正確旋轉。我不知道爲什麼，但我花了幾個小時，沒有解決方案，請幫助。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="Flip-jQuery/jquery-1.9.1.js"></script> 
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script> 
<script src="Flip-jQuery/jquery.flip.min.js"></script> 
<script src="Flip-jQuery/jquery.flip.js"></script> 


<title>Untitled Document</title> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#box1").on('mouseover',function(){ 
     $(".flip").flip({ 
      direction:'lr', 
      content:'hello', 
      color:'red' 
      }); 
    }) 
    $('.revert').on('click',function(){ 
     $('.flip').revertFlip(); 
     }) 
}); 
</script> 


#main{      
    border:1px solid red; 
    width:500px; 
    height:auto; 
    position:absolute; 
} 
#box1, #box2{ 
    border:2px solid black; 
    width:100px; 
    height:100px; 
    margin:10px; 
    cursor:pointer; 
    } 
</style> 
<div id='main'> 

<div id='box1' class='flip'> 
box1 
</div> 

<div id='box2'> 
box2 
</div> 

<a style=" float:right;" href="#" class="revert">Click to revert</a> 

</div> 

這是整個代碼。我嘗試過任何東西，但沒有任何東西。 在此先感謝。

Answer 1

試試這個

$(document).ready(function(){ 
    $("#box1").on('mouseover',function(){ 
     $(".side2").flip({ 
      direction:'lr', //in the flip API direction seems to come first in every example 
      content:'hello', 
      color:'red' 
     }); 
    }) 
}); 

你也有一個語法錯誤在你的HTML：

<div id='main'> 

    <div id='box1' class='side1'"> <!-- HERE remove that double quote --> 
    box1 
    </div> 

    <div id='box2' class='side2'> 
    box2 
    </div> 
</div> 

Answer 2

您已經包含了flip.js在你的HTML頭插件兩次。

Answer 3

檢查這件事我得到了什麼問題。基本上你觸發了兩次鼠標滑過事件JavaScript/jQuery: event fired twice