2

統合しようとしているプラ​​グインで絶対的な悪夢に見舞われています。

ページの X 要素をホバー時に反転させ、マウスアウト時に元に戻そうとしています。

フリップ機能を使用していますが、要素の上にカーソルを置き、フリップがアニメーションを終了するまで数秒待ってからカーソルを移動すると、正常に機能します。ただし、すばやくホバーすると、フリップが発生しますが、完全に台無しになり、複数の要素間でマウスをすばやく移動することはできません。

私はstop()無駄に使用しようとしたので、ここで尋ねると思いました.フィドルを添付しました.私のフィドルを見ているときに、マウスをすべての要素にすばやく移動すると、私が何を意味するかがわかります.

http://jsfiddle.net/5JyVC/

$('.sec-con').prepend('<div class="target" style="width:100%; height:100%; z-index:999999; cursor:pointer;top:0; left:0; display:block; position:absolute; "></div>');
$('body').on({
    mouseenter: 
    function () {
        $(this).stop(true, true).next('.sector').flip({
            direction:'rl',
            color:'#2d6995',
            speed: 200,
            content:'<span class="all-vacancies">View all Vacancies <br />in this sector.</span><span class="read-more">Click here to read more.</span>'
        });
    },
    mouseleave: function () {
        $(this).next('.sector').revertFlip();
    }
}, '.target');
4

2 に答える 2

1

それはflipLockデータ属性と関係があります。マウスアウトが早すぎるflipLockとtrue、元に戻すフリップが発生せず、次のマウスオーバーが間違ったコンテンツで開始されます。それ以降は、同じコンテンツ間を行ったり来たりすることになります。

FlipLock 検出を削除して呼び出しにreturn false追加すると、適切に元に戻ります。stopanimationflip

アニメーションは少し不安定に見えますが、それについて何ができるかわかりません。

これは私にとってはうまくいきます：http://jsfiddle.net/5JyVC/5/十分に速く移動しても、まだ混乱しますが、なぜそれが複数のマウスオーバーイベントなのかわかりませんか? これは、オリジナルがflipLock私が推測するのを防ぐことを意図したものです。

ひっくり返さflipLockれたときは、裏返しのみを許可し、その逆も同様です。flipただし、 andの現在の実装ではrevertFlip、これは許可されていません。

于 2013-08-21T16:16:25.270 に答える