0

divにフリップ効果を追加するだけの簡単なプラグインを作成しました。div にカーソルを合わせると div が反転しますが、カーソルを戻すと別の反転が表示されます。

jQueryreturn: falseの2番目のパラメーター関数を追加することで修正しました。hover()

私の質問は、ホバリングを止めるより良い方法はありますか?

JS:

$.fn.jflip = function(bgimage) {
    var img = bgimage;
    this.hover(function(){
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    }, function(){
        return false;
    });
}

HTML + CSS:

.flipper {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMMSb5XY_fztmTj2rSwFNn-nw2zxId1ZJLnuFfy39Rk-g2fHZ1) no-repeat;
    background-size: 98% 98%;
    background-position: 4px 4px;
    width: 400px;
    height: 400px;
    background-color: #eee;             
}
.fake {
    position: relative;
    top: -200px; left: 0;
    height: 200px;
    width: 400px;
    background-color: white;
}
.fake1 {
    position: relative;
    top: 200px; left: 0;
    height: 200px;
    width: 400px;
    background-color: white;
}

<body>
    <div class="flipper">
        <div class="fake" /></div>
    <div class="fake1" />
</body>

フィドル（問題あり）。

フィドル（回避策あり）。

それを行うより良い方法はありますか？それともそれを行う唯一の方法ですか？

助けてくれてありがとう。

4

1 に答える 1

1

.hover()( docs.on( 'mouseenter' ) ) はandの短縮形です.on( 'mouseleave' )。単に mouseenter イベントを にバインドするだけ.on( 'mouseenter' )です。

あなたのコードは次のようになります。

$.fn.jflip = function(bgimage) {
    var img = bgimage;
    this.on( 'mouseenter', function(){
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    }
  });
}
于 2013-07-06T15:39:16.417 に答える