Card doesn't stay flipped on hover

[saskakol]

I'm using the exact code from your website:

<script>

  $("#card").flip({
          trigger: 'hover'
        });

    </script>

and the same HTML too.

When i hover over the card, it flips to the back, and then flips back to the front instantly, without me hovering off the card.

PS. I also can't get the card grid example to work either.

Help would be appreciated :)

[nnattawat]

Could you try v1.1.0? I have tested it and it should work. If not JSFiddle would be a good way for debugging.

[saskakol]

I don't know how JSFiddle works exactly, since I've never used it, but I'll look into the new version once I get back to it!

[hgeorgilas]

I can confirm this happening to me also, I tried to create a JSFiddle but couldn't recreate... https://jsfiddle.net/w5reu7gb/2/

EDIT: Managed to fix it by setting the trigger to manual and binding mouseoverand mouseleave events on the selector

       $("#card").flip({
              axis: 'x',
              trigger: 'manual',
            });

        $('#card')
        .bind('mouseover',function()
        {
            $('#card').flip(true);
        })
        .bind('mouseleave',function()
        {
            $('#card').flip(false);
        });

[saskakol]

Thanks @masterakado

[saskakol]

I'll be sure to try that soon! 😃

[frontenddevguy]

Thank you for this!

[cbranje]

This is happening to me also even though I'm have this setup. I enter and the card flips, but if I move a single pixel, the mouse leave function is called.

$("#card").flip({ trigger: 'manual' });

    $("#card").mouseleave(function(event) {           
       console.log("mouseleave");
        $("#card").flip(false); 
    });

    $("#card").mouseenter(function(event) { 
        console.log("mouseenter");
        $("#card").flip(true); 
    });