Question

我有一个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;
                    });
                }
            });
        });
    });
});

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

jQuery动画多次发生

1 个答案: