flippy jquery effect не вращается правильно

Question

У меня есть проблема с flip-эффектом на jQuery plugin. Когда изображение вращается, оно не вращается правильно. Я не знаю, почему, но я провел часы и никаких решений, пожалуйста, помогите.

<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