эффект 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="#" class="revert">Click to revert</a>

</div>

Вот весь код. Я пробовал что угодно, но ничего. Заранее спасибо.


javascript html jquery flip
person Marios Nikolaou    schedule 18.08.2013    source источник
comment
В API-интерфейсе flip похоже, что атрибут direction вызывается раньше остальных, попробуйте. Кроме того, начальная функция кажется неактуальной. Попробуйте обернуть его в функцию $(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