Verzögerung Hover-Effekt auf Navigation Drop-down-Panel

Question

Ich kann nicht für das Leben von mir herauszufinden, wie diesen Schwebeflug zu verzögern. Wenn Sie http://forum.smartcanucks.ca auschecken, gibt es ein Menü am oberen Rand, wenn schwebende Panels angezeigt werden.

Die CSS sie ist für eine jQuery Alternative

#navigation li:hover > .panel { 
    display: block; 
} 

Ich suche zeigen, um es zu machen, so dass, wenn Sie die #navigation li schweben über eine 0,5 Sekunden Verzögerung vor der Anzeige ist: Block ; wird auf .panel angewendet und dann, wenn Sie den Hover des Elements li oder panel verlassen, gibt es eine Verzögerung von .3 Sekunden, bevor panel zur Anzeige zurückkehrt: none;

Ich habe CSS-Optionen ausprobiert und konnte sie nicht zur Arbeit bringen, ich habe auch versucht, verschiedene Schnipsel von jQuery zu implementieren, die ich über das Internet vergeblich gefunden habe.

Der Grund für die Verzögerung ist, dass Leute versehentlich die Maus über das li-Element bewegen und das unerwünschte .panel-Display nervt.

Ich schätze jede Hilfe.

Hier ist eine CSS Option Ich umzusetzen versucht und es nicht zur Arbeit kommen konnte: http://jsfiddle.net/gryzzly/JWk7V/4/ (dies ist ein Beispiel - nicht von mir) Ich würde viel lieber eine jQuery-Lösung bevorzugen, die Cross-Browser ist .

EDIT

Ok, ich versuche, die .panel Box zu bekommen mit jquery nur anzuzeigen, und nicht CSS

Ich versuche, diese

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
    $("#navigation li").hover(function() { 
     $('#navigation li:hover > .panel').addClass("displayblock");  
    },  
    function() {  
     $('.panel').removeClass("displayblock");  
    }); 
}); 
</script> 

und hier ist die Klasse .displayblock {display: block;}

Bei Verwendung von Firebug wird die Anzeigeblockklasse zum Bedienfeldelement hinzugefügt, das Bedienfeld wird jedoch nicht angezeigt. Nicht sicher, was ich falsch mache.

Ich möchte HoverIntent verwenden, aber bevor ich sogar versuche, dass ich die Panel-Anzeige mit nur jQuery machen möchte.

Answer 1

Ich würde vorschlagen, die jQuery hoverintent Plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html

Es gibt keine CSS einzige Lösung, so meine Empfehlung wäre, eine Klasse gelten die .panel zu ermöglichen CSS zu offenbaren, und entfernen Sie dann die Klasse mit jQuery und Wenden Sie den gleichen Effekt mit Hover-Events an.

Answer 2

Ihr .panel wird möglicherweise hinter einem anderen Element auf der Seite angezeigt. Versuchen Sie, das mit CSS-Z-Index-Eigenschaften zu beheben. Denken Sie daran, eine 'Position' für Elemente zu definieren, auf die Sie versuchen, Z-Indizes anzuwenden.

Auch CSS3-Übergänge haben volle Unterstützung für delays, die Sie verwenden könnten, um diese Art von Dropdown ohne eine einzige Zeile von JS zu erstellen.