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 に答える