javascript - 複数回発生するjQueryアニメーション

Question

Flippy というプラグインを使用してアニメーション化しようとしている div があります。アニメーションを正しく設定しましたが、ユーザーが div の内側に複数回マウスを合わせると、アニメーションが実行され続けます。

現在、アニメーションは、最初に div をクリックしてそのアニメーションをインスタンス化した後、ユーザーが要素にカーソルを合わせるたびに発生します。

私の目標：

• ユーザーが div の上にマウスを置きます。
• 新しいコンテンツで新しい div に遷移 (反転) します。
• ユーザーがトランジション (フリップ) をマウスアウトすると、元の状態に戻ります。
• アニメーションが完了し、ユーザーがマウス アウトしてから div に戻ると、アニメーションを開始するために再度クリックする必要があります。

ここに私が今持っている私のコードがあります。Wesley Murch 氏のおかげで、どうやらフィドルを投稿できなくなったようです。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;
                    });
                }
            });
        });
    });
});