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

你已经在你的HTML标题中包含了两次flip.js插件。

Answer 3

检查这件事我得到了问题所在。基本上你在事件JavaScript/jQuery: event fired twice

上触发两次鼠标

flippy jquery效果无法正确旋转

3 个答案: