jQuery show/hide - Frage zur Verzögerungsvariable

Question

Ich benutze den folgenden Code, um eine Box anzuzeigen, wenn man mit der Maus über ein bestimmtes div geht und die Verzögerung beim Ausblenden eingestellt hat, aber gibt es eine Möglichkeit, den fadeOut-Effekt zu löschen der Benutzer geht zurück zum div?

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

-Code für die divs

<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> 

darüber nachzudenken Ich denke, es ist wahrscheinlich ein Fall mir die fadeIn stoppen zu müssen Funktion zu arbeiten, wenn Sie aus dem div gehen weg und gehen Sie zurück.

Alle Gedanken wären hilfreich, noch immer sehr neu in jQuery!

Nebenbei bemerkt, welchen Effekt sollte ich verwenden, um die Box von nichts auf die Höhe des Inhalts zu erweitern, anstatt nur einzublenden?

Answer 1

Es gibt ein sehr schönes Plugin, das in jQuery speziell für diese Art von Mauseingabe/-freigabe-Funktion geschrieben wurde.

Es heißt hoverIntent.js

Es schafft eine konfigurierbare Verzögerung, bevor die nächste Folie Aktion usw. durchführen, ideal für Menü-Interaktionen. Sie können für jedes der Ablaufereignisse auch eigene Funktionen aufrufen.

Ein Beispiel für die Standardverwendung ist:

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

Wodurch fadeMenu und showMenu würde Ihre jQuery-Funktionen sein, das Aussehen des Menüs zu ändern.

Um Ihre eigene Konfiguration der Verzögerungs erstellen Sie einfach verwenden:

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

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

Edit:

Sie zum Beispiel, solange die der Auslöser ist die versteckte div zu zeigen, dann sollten Sie in der Lage sein, Folgendes zu verwenden:

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'); 
}