私が一緒に仕事をしているデザイナーは、私に取り組むべき機能を少し与えてくれましたが、どのようにアプローチすればよいかわかりません。彼女は基本的に次のことを望んでいます。

• リンクにカーソルを合わせると、パネルがドロップダウンするはずです（このビットは問題ありません）
• パネルは10秒後に消えるはずです（これも問題ありません）
• カーソルがパネル内にある場合、パネルが消えることはありません。カーソルがパネルを離れると、10秒のタイマーが再び開始されます（erm ..）

この3番目の機能を実現する方法を説明するプラグインまたは記事の正しい方向を誰かに教えてもらえますか？私はかなりベテランの開発者ですが、これにアプローチする方法や、グーグルを開始する場所にさえ苦労しています。これが私がこれまでに持っているものです。すべてが機能していますが、その3番目の箇条書きがあります。これを機能させるには、アプローチを完全に変更する必要があるかもしれないと感じています。

答え...

以下の提案に基づいて、最終的な解決策は...

シンプルなドロップダウンメニューを作成しました。
コードとデモはこちら: http://jsfiddle.net/3Lq2d/5/
次のようになります:

マウス オーバーMENU 1は s でフェードしSubmenuます。

あなたがたまたまスパズで、メニュー上でマウスをたくさん動かした場合を除いて、それはうまく機能します。

を使用.stop(true,true)すると、spaz の問題が修正されますが、メニューからサブメニューにマウス ダウンする機能が削除されます。フェードイン/フェードアウトを使用してわずかな遅延を与えているため、マウスがメニューからサブメニューに移動すると、サブメニューが表示されたままになります... stop(true,true) これが壊れます。

すべての適切な場所でわずかな遅延を伴うフェード メニューを作成する最善の方法は何ですか?

アップデート：

hoverintentの遅延を追加して、完全に満足するまでいじりました...最終的なコードは次のとおりです：http://jsfiddle.net/3Lq2d/75/

私はこの設定をしています：

と：

1つの問題は、マウスを入力すると、実際にマウスで入力したdivではなく、すべてのdivが影響を受けることです。

ここで何$(this)を意味するのかわかりません

2番目の問題は、とよりも優れた方法hoverを使用したいのですが、同じ効果を得るためにどのように使用するかがわかりません。hoverIntentmouseentermouseleavefadeTo

何か案は？

ありがとう

このガイドに従って、JQuery を Firefox 拡張機能にロードしようとしました。

ローダーの読み込みに問題がありますjquery.hoverIntent.js。ここでダウンロードしました

エラーメッセージ："Type Error: $ is undefined"

最近、オンライン検索の量が解明に役立たないように見えるという問題に遭遇しました。特に、jQuery hoverIntentプラグインを使用すると、最初の「hoverIn」関数が正しく呼び出されますが、「hoverOut」は適用されません。

簡単な背景として、これを順序付けられていないリストから作成されたメニューで使用しています。jQueryの.slideDown（）エフェクトは「hoverIn」で使用され、.slideUp（）は「hoverOut」関数で使用されます。最初の.slideDown（）は機能しますが、カーソルが領域を離れると、.slideUp（）が適用される代わりに、要素が即座に消えます。同様に、後続のマウスオーバー/マウスアウトイベントは「hoverIn」または「hoverOut」関数をトリガーしません。最初の「hoverIn」関数を適用するには、ページを完全に更新する必要があります。

.fadeIn（）、. fadeOut（）、. show（）、animate（）など、さまざまなjQueryアニメーション効果を試しましたが、すべて成功しませんでした。私も過去に何度もこの問題に遭遇しました、そして私はおそらくそれを引き起こしているのではないかと思っています。

これが私が使用しているhoverIntentコードです：

これが行われているテストページを見たい場合に備えて、ここにリンクがあります：

http://test.nimblehost.com/dexture/

なぜこれが起こっているのか、そしてそれを修正する方法についての提案をいただければ幸いです。GoogleCDN経由で提供されるjQueryv1.7.xとhoverIntentのr6を使用しています。

ホバー イベントは、私の Web ページのナビゲーションで重要な役割を果たしています。ユーザーが誤ってホバー イベントをトリガーして気を散らしてほしくありません。

マウスが十分に遅くなるまでホバーイベントを発生させないhoverIntentを認識しています。ただし、ユーザーが下にスクロールして要素の上に着地すると、常に hover イベントが発生します。

Google Imagesはこれを非常にうまく解決しています。下にスクロールしてもホバーは発生しません。また、要素にスクロールした後にマウスを少し動かしても、ホバーはトリガーされません。

Google 画像に似たホバリング動作を実装するプラグインはありますか?

hoverintent プラグインを使用して、次の JavaScript コードを置き換えようとしています。

私のhtmlは次のとおりです。

これが私のcssです：

これは、私が達成しようとしていることの簡単な図です。

私が望むのは、ユーザーがマウスオーバーして#nav、マウスを外したときにのみ消えるようにすることです#top（私の図では灰色です）。hoverintent サイトの例を考えると、これを達成する方法がわかりません:(

誰でもポインタを持っていますか？前もって感謝します！

- - - 編集 - - -

次のようにして、ホバーインテントがある程度まで機能するようになりました。

問題は、 divの代わりにマウスアウトulすると消えてしまうことです。閉じますが葉巻はありません:(#nav#top

私はホバーインデントプラグインを使用しています。これには、マウスホバーとマウスリーブを組み合わせる機能が1つだけあります。

コード1：

.partのマウス脱退関数を書く必要があるので、このように作成しました

Code2：

しかし、それはエラーのようです...これを修正する方法は？

jQuery プラグイン hoverIntent を使用しています。問題は、ページが読み込まれるときに、マウスが既にオブジェクト '#gallery' の上にあるため、hoverIntent コードがトリガーされないことがあります。

これが私のコードの例です：

誰かがこれに対する解決策を知っていますか?

赤いボックスの下にあるメニューを下にスライドするのではなく上にスライドさせるのに助けが必要です。 http://www.radiofriendly.freehosting.com/jquery/menu.html

これが実際の例です。青いバナーの下にあるメニューにマウスを合わせるだけです。 https://partner.microsoft.com/germany/partner

誰かがそれを実現するためにjsで変更する必要があるものを正確に教えてもらえますか？できるだけ具体的にお願いします。Jqueryは初めてです。ありがとう！