0

我想用Jquery插件Flippy在“鼠标悬停”上翻转一个简单的图像，现在的问题是当我“悬停”它时它会循环。我是 JS 初学者，因此我很抱歉这个可能相当简单的问题..

我的代码如下所示：

$(".chameleonclass").mouseover(function() {
$(".chameleonclass").flippy({
content: '<img class="top" src="a1records.jpg" alt="a1records"/>',
direction:"TOP",
duration:"750",
onFinish:function(){
}
});
});

现在，我想我必须在 onFinish 部分添加一些内容。我已经尝试了我想出的所有方法（结束、停止等），但没有任何效果，当我将鼠标悬停在对象上时，对象只是循环和翻转多次而没有结束。

你能帮我吗？提前感谢您的阅读，祝您周末愉快，蒂姆

4

1 回答 1

2

我有同样的问题，但最终设法想通了。这个想法是在第一次发生时关闭事件触发器。然后在鼠标离开时再次触发它。

我希望你能理解代码，但我得到了它的使用。

<script>

    $(document).ready(function(){
        $(".flipbox").on("mouseenter",function(){
                $(this).flippy({
                    color_target: "red",
                    verso:"jippii",
                    duration:"500",
                    direction: "TOP",
                });
                $(".flipbox").off("mouseenter");
        });
        $(".flipbox").on("mouseleave",function(){
                $(this).flippyReverse();
                $(".flipbox").on("mouseenter",function(){
                $(this).flippy({
                    color_target: "red",
                    verso:"jippii",
                    duration:"500",
                    direction: "TOP",
                });
                $(".flipbox").off("mouseenter");
        });

        });
    });
</script>
于 2013-05-31T14:00:10.613 回答