flippy jquery ефектът не се върти правилно

Имам проблем с ефекта на обръщане на приставката 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="/bg#" class="revert">Click to revert</a>

</div>

Ето целия код. Опитах всичко, но нищо. Благодаря предварително.


javascript html jquery flip
person Marios Nikolaou    schedule 18.08.2013    source източник
comment
Във flip api изглежда, че атрибутът за посока се извиква преди другите, опитайте това. Освен това първоначалната функция изглежда без значение. Опитайте да го опаковате във функцията $(document.ready()   -  person Sterling Archer    schedule 19.08.2013

Отговори (3)


arrow_upward
0
arrow_downward

Опитайте тази

$(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>
person Sterling Archer    schedule 18.08.2013
comment
Благодаря колега за отговора. Нищо не се случва, въртенето започва надясно, но в средата изчезва. (не се върти на 360 градуса/180 градуса). - person Marios Nikolaou; 19.08.2013

arrow_upward
0
arrow_downward

Включихте плъгина flip.js два пъти във вашия HTML хедър.

person cssyphus    schedule 07.11.2013

arrow_upward
0
arrow_downward

Проверете това нещо, разбирам какъв е проблемът. По принцип вие задействате два пъти събитието с мишката върху JavaScript/jQuery: събитието се задейства два пъти

person Mauro De Biasio    schedule 07.11.2013