jQuery animation happening multiple times

Question

I have a div that I'm attempting to animate using the plugin called Flippy. I have the animation set up correctly but when the user mouses over the inside of the div multiple times it keeps performing the animation.

Right now the animation happens every time the user hovers over the element after first clicking the div to instantiate that animation.

My goal:

• The user mouses over the div.
• It transitions(flips) into the the new div with the new content.
• When the user mouses out the transition(flip) reverts back to it's original state.
• When the animation completes and the user mouses out and then goes back to the div they have to click it again in order for the animation to start.

Here is my code that I have right now. Apparently I can't post fiddles anymore thanks to Mr. Wesley Murch. see comment for jsFiddle.

$(document).ready(function () {
    var url2 = "http://static.blazonco.com/customcss/dyllen/HayworthCreative/js/jquery.flippy.min.js";
    $.getScript(url2, function () {
        $("#myFlippyBox").one("click", function () {
            $(this).flippy({
                color_target: "#a7a7a7",
                verso: "<p class='title'>This is a stock image</p>",
                onFinish: function () {
                    $("#myFlippyBox").hover(function () {
                        $(this).flippyReverse({
                            color_target: "#a7a7a7 ",
                            recto: "<img src='http://static.blazonco.com/customcss/dyllen/HayworthCreative/images/ceo.jpeg'/>"
                        });
                        return false;
                    });
                }
            });
        });
    });
});

Answer 1

In order for the flip scripts to be used multiple times on different events I made functions which can be reused.

http://jsfiddle.net/N5tvC/4/

function flip(t) { // t is the id/class of the element
    $(t).off().flippy({ // here instead of t you can also write #myFlippyBox and remove it
        // .off() removes mouseout/mouseover handlers
        color_target: "#a7a7a7",
        verso: "<p class='title'>This is a stock image</p>",
        onFinish: function () {
            $('#myFlippyBox').off().on('mouseout', function () { 
                                           // remove handles again and add mouseout
                flipBack('#myFlippyBox');
            });
        },
        onReverseFinish: function () {
            $('#myFlippyBox').off().on('click', function(){
              flip('#myFlippyBox');
            });
        }
    });
}

function flipBack(t) {
    $(t).flippyReverse({
        color_target: "#a7a7a7 ",
        recto: "<img src='http://static.blazonco.com/customcss/dyllen/HayworthCreative/images/ceo.jpeg'/>"
    });
}


$(function () {
    $("#myFlippyBox").on('mouseover', function () { 
        // at start bind mouseover and run function flip()
        flip('#myFlippyBox'); // here you send the id/class of the element
    });
});