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

Question

次のコードを使用して、特定のdivをマウスオーバーし、フェードアウトの遅延を設定したときにボックスを表示しますが、ユーザーがDivに戻るとフェードアウト効果をキャンセルする方法はありますか？

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

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>

それについて考えると、おそらく、あなたがdivから離れて戻ってきた場合、フェデイン関数を止める必要があるケースだと思います。

JQueryにとって非常に新しいので、どんな考えも役立つでしょう！

サイドノートでは、ボックスを拡張してからコンテンツの高さまで拡張するために、どのような効果を使用する必要がありますか？

Answer 1

このタイプのマウスENTER / LEAVE機能のために特に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');
}