Jquery Mouseover Object Infinite Loop with Flippy Plugin

Question

I want to flip a simple image on "mouseover" with the Jquery plugin Flippy, the problem now is that it loops when I "mouseover" it. I am a JS beginner, hence I am sorry for this maybe rather simple question..

My code looks like this:

$(".chameleonclass").mouseover(function() {
$(".chameleonclass").flippy({
content: '<img class="top" src="a1records.jpg" alt="a1records"/>',
direction:"TOP",
duration:"750",
onFinish:function(){
}
});
});

Now, I guess I have to add something in the onFinish part. I have tried everything I have come up with (end, stop etc.) but nothing really works, the object just loops and flips multiple times without an end when I mouseover the oject.

Could you possibly help me? Thanks in advance for reading and have a great weekend Tim

Answer 1

I had the same problem but finally managed to think it through. The idea is to turn the event trigger off when it first time happens. And then trigger it on again when your mouse leaves.

I hope you can make sense of the code, but I got it working with this.

<script>

    $(document).ready(function(){
        $(".flipbox").on("mouseenter",function(){
                $(this).flippy({
                    color_target: "red",
                    verso:"jippii",
                    duration:"500",
                    direction: "TOP",
                });
                $(".flipbox").off("mouseenter");
        });
        $(".flipbox").on("mouseleave",function(){
                $(this).flippyReverse();
                $(".flipbox").on("mouseenter",function(){
                $(this).flippy({
                    color_target: "red",
                    verso:"jippii",
                    duration:"500",
                    direction: "TOP",
                });
                $(".flipbox").off("mouseenter");
        });

        });
    });
</script>