javascript - 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

检查这件事，我知道问题出在哪里。基本上，您在事件JavaScript/jQuery 上触发了两次鼠标：事件触发了两次

Answer 2

您在 HTML 标头中包含了两次 flip.js 插件。

Answer 3

尝试这个

$(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>