✔ jQuery .mouseover .mouseout

[Zack]

Hallo,

ich habe eine Navigation mittels jQuery's .mouseover und .mouseout erstellt, ist zwar noch nicht optimal aber das kommt noch. Dazu folgender Code:
(Javascript)

(function($){
    $.navigation = function(){
        var paddingRef = $("li.navi").children("a.navLink");
        var defaultCSS = {
            "padding-top"   : paddingRef.css("padding-top"),
            "padding-right" : paddingRef.css("padding-right"),
            "padding-left"  : paddingRef.css("padding-left"),
            "padding-bottom": paddingRef.css("padding-bottom")
        };
        $("li.navi").mouseover(function(){
            var navLink = $(this).children("a.navLink");
            var subNavi = $(this).children("ul.subNavi");
            var subText = navLink.children("span.subText");
            navLink.stop().animate({paddingTop:0, paddingBottom:0}, "fast");
            subText.fadeOut("fast");
            subNavi.fadeIn("fast");
        }).mouseout(function(){
            var navLink = $(this).children("a.navLink");
            var subNavi = $(this).children("ul.subNavi");
            var subText = navLink.children("span.subText");
            subNavi.fadeOut("fast");
            subText.fadeIn("fast");
            navLink.stop().animate(defaultCSS, "fast");
        });
    }
})(jQuery);

HTML (Ausschnitt)

<li class="navi" id="naviWelcome">
    <a class="navLink" href="{{ url('Welcome') }}">{% trans %}Welcome{% endtrans %}<br>
    <span class="subText">{% trans %}Welcome Subtext{% endtrans %}</span></a>
    <ul class="subNavi">
        <li><a class="subNavi" href="{{ url('Welcome') }}#">&raquo; {% trans %}Foobar{% endtrans %} &laquo;</a></li>
        <li><a class="subNavi" href="{{ url('Welcome') }}#">&raquo; {% trans %}Foobar{% endtrans %} &laquo;</a></li>
        <li><a class="subNavi" href="{{ url('Welcome') }}#">&raquo; {% trans %}Foobar{% endtrans %} &laquo;</a></li>
    </ul>
</li>

subNavi ist durch CSS im default ausgeblendet (display:none).
Jetzt zu meinem Problem: Durch das verschieben des Navi Eintrages wandert die Maus immer wieder über die subNavi. Was dazu führt, dass das mousout Event immer wieder gecallt wird, weil ja das Listen-Element verlassen wird und in ein Kind-Element gewechselt. Hat jemand eine Idee ob sich das verhindern lässt?

Mfg Zack

 

[CPoly]

Genau deshalb bietet jQuery als Zusatz noch mouseenter und mouseleave. Die lassen sich auch auf einmal mittels hover Funktion binden http://api.jquery.com/hover/

 

[Arster-Boy]

JQuery bietet zudem auch die Funktion, das Ausklappmenü erst nach einer bestimmten Zeit verschwinden zu lassen. Wenn man dort zum Beispiel eine halbe Sekunde einstellt, dann kann der Nutzer bequem mit dem Zeiger rüberfahren und verhindern, dass das Menü zuklappt.

$(document).ready(function() {
        $("#Hauptmenüpunkt").hover(function() {
	        $('#Untermenü').fadeIn('slow');
	        if (window.hide !== undefined) {
		     clearTimeout(hide);
	        }
         }, function() {
	        hide = setTimeout('hideUntermenü()', 1000);
         });
}

function hideUntermenü() {
         $('#Untermenü').css('display', 'none');
}