jQuery动画发生多次答案

【问题标题】：jQuery animation happening multiple timesjQuery动画发生多次
【发布时间】：2013-05-25 06:30:08
【问题描述】：

我有一个 div，我正在尝试使用名为 Flippy 的插件制作动画。我已经正确设置了动画，但是当用户多次将鼠标悬停在 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;
                    });
                }
            });
        });
    });
});

【问题讨论】：

如果你想在这里查看我的小提琴，它是jsfiddle.net/djowinz/N5tvC
我很困惑，你为什么不能发布小提琴？无论如何，想想你的逻辑，它并不完全奏效。您希望它在悬停/不悬停时翻转，但希望它仅在单击时处于活动状态？所以这就是我猜你想要的。您希望它在单击时翻转，然后在鼠标移出时翻转回来。猜你不想让鼠标悬停再次激活它，只需要鼠标悬停来解除翻转，对吗？
这jsfiddle.net/N5tvC/4真的是你想要的吗？
@Dropped.on.Caprica 我希望用户单击 div 使其翻转，当他们将鼠标移出 div 时，它会返回到原始状态。
@Spokey 你的小提琴似乎不起作用，我喜欢你把每个操作都变成了一个函数，但在这种情况下这不是必需的。我需要一个快速而肮脏的解决方案，并且能够始终如一地工作。

标签： javascript jquery html

【解决方案1】：

为了在不同的事件中多次使用翻转脚本，我制作了可以重复使用的函数。

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
    });
});

【讨论】：