jQueryの表示/非表示 - 遅延変数に関する質問

Question

特定のdivをマウスオーバーしてフェードアウトを設定したときに、次のコードを使用してボックスを表示していますが、fadeOut効果をキャンセルする方法がありますユーザーはdivに戻りますか？私はそれはおそらく、あなたが離れてDIVから行くと戻って行くなら、私が働いてフェードイン機能を停止する必要がケースだと思うそれについて考えるのdiv

<div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div> 

ため

jQuery("#cart-box").hover(function() 
{ 
    jQuery("#cart-container").fadeIn('fast'); 
}, function() 
{ 
    jQuery("#cart-container").delay(800).fadeOut('fast'); 
}); 

コード。

jQueryにはまだまだ新しいことがあります。

ちょっと退色するのではなく、コンテンツの高さまで何も展開しないようにするにはどのような効果が必要ですか？

Answer 1

jQueryには、このタイプのマウスの出入り機能専用のプラグインがあります。

それはhoverIntent.js

と呼ばれるそれは、メニューの相互作用のための偉大な次のスライドアクションなどを実行する前に、設定可能な遅延を作成します。また、各有効期限イベントで独自の関数を呼び出すこともできます。

デフォルトの使い方の例は次のとおりです。

$("#menu li").hover(showMenu, fadeMenu) 

fadeMenuとshowMenuは、メニューの外観を変更するためにあなたのjQueryの機能になりますれます。

var config = {  
    over: showMenu, 
    timeout: 500, // number = milliseconds delay before fadeMenu is called 
    out: fadeMenu 
}; 

$("#menu li").hoverIntent(config) 

編集：あなたたとえば

、限り、あなたはできるはずである隠されたdiv要素を表示するためのトリガであるとして、あなたは、単に使用遅延の独自の構成を作成する

次のコードを使用してください：

var config = {  
    over: showMenu, 
    timeout: 500, // number = milliseconds delay before fadeMenu is called 
    out: fadeMenu 
}; 

$("#cart-box a").hoverIntent(config); 

function showMenu() { 
    jQuery("#cart-container").fadeIn('fast'); 
} 

function fadeMenu() { 
    jQuery("#cart-container").fadeOut('fast'); 
}