flippy jquery effect doesn't rotate correctly

Question

I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.

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

Here is the whole code.I have tried anything but nothing. Thanks in advance.

In the flip api, it looks like the direction attribute is called before the others, try that. Also, the initial function seems irrelevant. Try wrapping it in the `$(document.ready()` function — Sterling Archer, Aug 18 '13 at 22:20

score 0 · Answer 1 · answered Aug 18 '13 at 22:26

Try this

$(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'
        });
    })
});

You also have a syntax error in your HTML:

<div id='main'> 

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

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

Thanks mate for the response.Nothing happens, the rotation begin right but at the middle it disappears.(it does not rotate 360deg/180deg). — Marios Nikolaou, Aug 19 '13 at 12:47

score 0 · Answer 2 · answered Nov 07 '13 at 05:26

0

You have included the flip.js plugin twice in your HTML header.

answered Nov 07 '13 at 05:26

cssyphus

37,875
18
96
111

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice

edited May 23 '17 at 12:21

Community

1
1

answered Nov 07 '13 at 05:54

Mauro De Biasio

1,146
6
16

flippy jquery effect doesn't rotate correctly

3 Answers3