1

jquery ホバー機能があり、2 つのアニメーションと 3 つの .css 関数があります。素早くロールオーバーすると変な発砲が混ざる。私はjsbinを使用してセットアップしました。ロールオーバーするとホバーが表示され、通常の速度で実行すると正しく動作し、速く実行すると間違いが見られます。これを理解するのに助けが必要です。私が得ることができる提案は非常に役に立ちます。事前に感謝します。

http://jsbin.com/isigoz/67/edit

4

1 に答える 1

0

jQuery.finish() 関数を使用して、マウスをすばやく動かした後にアニメーションのキューが長くならないようにする必要があります。次の行を変更して、アニメーションの前に .finish() 関数を含めます。

$('.backing').finish().fadeOut();

$('#'+gymlocation+'_back').finish().fadeIn();

$('.backing').finish().fadeOut();

$('#'+current_back).finish().fadeIn();

次に、マウスオーバー/アウト領域が色付き領域全体ではなくテキストに制限されるという問題があります-これはちょっと奇妙ですが、あなたが望むものかもしれませんか? そのため、私はその解決策を提案していません。

また、JavaScript 機能が重複しているため、不要なアニメーションが発生する可能性があります。コードの最後から 2 番目のセクションを削除します。

$('#menu-wrapper').mouseleave(function() { ... and everything in-between ... });

hover()ここへの呼び出しでこのアニメーションが既にあるためです。

$('#menu-wrapper').hover( handlerIn, handlerOut );

2 番目の引数を使用しますhandlerOut。

今はずっと良くなっているようです - それがあなたが期待しているものかどうかはわかりません.

編集

まず、すべてのアニメーションに終了機能を追加しないでください。私の答えを見てください。すべきではないミニメニューのアニメーションに追加しました。

あなたの問題はこの行にあります：

$('#menu-text, .backing').css({
  display:'none'
});

これを次のように変更します。

$('#menu-text, .backing').fadeOut();

テキストメニューの表示プロパティに影響を与える他のアニメーションがあり、非表示にした後に表示されるためです。fadOut() は、マウス ホバーよりも長く続きます。これで、うまく機能しているようです。

リンクは次のとおりです。http://jsbin.com/isigoz/87/

于 2013-06-18T03:18:26.383 に答える