0

我有一个 div，我正在尝试使用名为 Flippy 的插件制作动画。我已经正确设置了动画，但是当用户多次将鼠标悬停在 div 内部时，它会继续执行动画。

现在，每次用户在第一次单击 div 以实例化该动画后将鼠标悬停在元素上时，都会发生动画。

我的目标：

  • 用户将鼠标悬停在 div 上。
  • 它使用新内容转换（翻转）到新的 div 中。
  • 当用户将鼠标移出时，transition(flip) 会恢复到其原始状态。
  • 当动画完成并且用户将鼠标移出然后返回到 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;
                    });
                }
            });
        });
    });
});
4

1 回答 1

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
    });
});
于 2013-05-24T22:30:08.650 回答