jquery menu logik problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • jquery menu logik problem

    Hi,
    habe folgendes Problem:
    ich will in einer MetaNavigation einen Slide Effekt mit JQuery realisieren.
    Hier das Online Beispiel:
    JQuery Menu testseite
    wenn man mit der MAus rechts oben über DE und die Flagge geht fährt das Menü und das Hintergrund für das listeelement bleibt sichbar - fein
    Wenn man jedoch dabei über den Link "Newsletter" fährt und dann nach unten in das sich gerade wieder schließende Menü oder auch schnell über die Flagge, lande ich in einer Endlosschleife - das menu klappt zu - wieder auf - zu etc.

    Hier mal der relevante Code:
    Html:
    PHP-Code:
    <ul id="metaNav">
      <
    li><a href="#"  id="newsletterLink">NEWSLETTER<span>|</span></a></li>
      <
    li  id="languageLi">
        <
    a href="#"  id="languageLink">DE
           
    <img src="flag_ger.gif" alt="" id="flagMetaNav" />
        </
    a>
        <
    ul id="langNav">
          <
    li>
           <
    a href="#" id="langEng">English</a>
          </
    li>
          <
    li>
           <!-- 
    etc... --!>
          </
    li>
        </
    ul>
      </
    li>
    </
    ul
    Javascript bzw.: JQuery
    PHP-Code:
    jQ jQuery.noConflict();
    jQ(document).ready(function(){
      var 
    MenuSpeed 300
      
    jQ("#languageLi").mouseenter(function(){
         
    jQ("#languageLink").css("background-position""top right");
         
    jQ('#langNav').slideDown(MenuSpeed, function(){  });
      });
      
    jQ("#languageLi").mouseleave(function(){
         
    jQ("#langNav").slideUp(MenuSpeed
             function(){ 
                
    jQ("#languageLink").css("background-position""bottom");
             }
         );
      });
    }); 
    Wie kann ich den erreichen dass, solange die Animation (slideDown(), slideUp()) läuft, beim hovern das Event nicht neu abgefeuert wird
    So in der Art:

    wenn slideUp oder slideDown aktiv
    ignoriere hover

    Hoffe ich habe mich verständlich ausgedrückt
    "I don't want to belong to any club that would accept me as a member."

    Groucho Marx

  • #2
    Hallo,

    die beiden Funktionen, die du setzt, kannst du erstmal in zwei Variablen speichern, statt sie sofort zuzuweisen. Dann setzt du nur den Handler für mouseenter. Als erstes in der Handler-Funktion löschst du ihn wieder (unbind) und im slideDown-Callback setzt du den anderen für mouseleave. Im mouseleave-Handler und im slideUp-Callback machst du es anders herum.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      THX du schöne der Nacht,
      du meinst erstmal so:
      PHP-Code:

      jQ
      (document).ready(function(){
        var 
      MenuSpeed 300
        var 
      down jQ('#langNav').slideDown(MenuSpeed, function(){ alert(''); });
        
      jQ("#languageLi").mouseenter(function(){
           
      jQ("#languageLink").css("background-position""top right");
           
      down;
        });
      }); 
      dann wird aber der Inhalt der Variablen down beim laden der seite direkt aufgrufen und nicht mehr beim mouseenter ??
      "I don't want to belong to any club that would accept me as a member."

      Groucho Marx

      Kommentar


      • #4
        Nein, so:

        PHP-Code:
        jQ jQuery.noConflict();
        jQ(document).ready(function() {
            var 
        MenuSpeed 300
            var 
        handleMouseEnter = function() {
                
        // TODO: hier handleMouseEnter wieder "unbind"en
                
        jQ("#languageLink").css("background-position""top right");
                
        jQ('#langNav').slideDown(MenuSpeed, function(){
                    
        // TODO: hier handleMouseLeave "bind"en
                
        });
            };
            var 
        handleMouseLeave = function() {
                
        // TODO: hier handleMouseLeave wieder "unbind"en
                
        jQ("#langNav").slideUp(MenuSpeed
                function() { 
                    
        // TODO: hier handleMouseEnter "bind"en
                    
        jQ("#languageLink").css("background-position""bottom");
                });
            };
            
        // TODO: hier handleMouseEnter "bind"en
        }); 

        Edit: kann aber sein, dass es dann offen bleibt, wenn du während des Ausrollens mit der Maus runter gehst. Ich kenne mich halt mit jQuery nicht so aus. Wenn das Prinzip aber dadurch erstmal klar wird, kannst du ja die Event-Handler nach deinem eigenen Ermessen (de)aktivieren.
        Zuletzt geändert von AmicaNoctis; 28.09.2010, 13:28.
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          THX AmicaNoctis
          dein Tip funktioniert
          PHP-Code:
          jQ jQuery.noConflict();
          jQ(document).ready(function() {
              var 
          MenuSpeed 200
              var 
          handleMouseEnter = function() {
                  
          // TODO: hier handleMouseEnter wieder "unbind"en
                  
          jQ("#languageLi").unbind('mouseenter'handleMouseEnter);
                  
          jQ("#languageLink").css("background-position""top right");
                  
          jQ('#langNav').slideDown(MenuSpeed, function(){
                      
          // TODO: hier handleMouseLeave "bind"en
                      
          jQ("#languageLi").bind('mouseleave'handleMouseLeave);
                  });
              };
              var 
          handleMouseLeave = function() {
                  
          // TODO: hier handleMouseLeave wieder "unbind"en
                  
          jQ("#languageLi").unbind('mouseleave'handleMouseLeave);
                  
          jQ("#langNav").slideUp(MenuSpeed
                  function() { 
                      
          // TODO: hier handleMouseEnter "bind"en
                      
          jQ("#languageLi").bind('mouseenter'handleMouseEnter);
                      
          jQ("#languageLink").css("background-position""bottom");
                  });
              };
              
          // TODO: hier handleMouseEnter "bind"en
              
          jQ("#languageLi").bind('mouseenter'handleMouseEnter);
          // codezeile für meine Anschluss Frage....
              
          jQ("#top").bind('mouseenter'handleMouseLeave);// das bringt nix ....
          }); 
          Habe jetzt noch ne Anschluss Frage
          Wenn ich mit der Maus schnell über DE "wische" bleibt das subMenu sichtbar
          Überlege schon ob ich nicht "its not a bug - its a feature" dazu sagen soll...
          Aber wie könnte ich das vermeiden?
          "I don't want to belong to any club that would accept me as a member."

          Groucho Marx

          Kommentar


          • #6
            Zitat von mcmurphy Beitrag anzeigen
            Aber wie könnte ich das vermeiden?
            Wie bereits im Edit gesagt: genau weiß ich es nicht. Du kannst es mal so probieren:

            PHP-Code:
            jQ jQuery.noConflict();
            jQ(document).ready(function() {
                var 
            MenuSpeed 200
                var 
            handleMouseEnter = function() {
                    
            // DONE: hier handleMouseEnter wieder "unbind"en
                    
            jQ("#languageLi").unbind('mouseenter'handleMouseEnter);
                    
            // DONE: hier handleMouseLeave "bind"en
                    
            jQ("#languageLi").bind('mouseleave'handleMouseLeave);
                    
            jQ("#languageLink").css("background-position""top right");
                    
            jQ('#langNav').slideDown(MenuSpeed, function(){
                    });
                };
                var 
            handleMouseLeave = function() {
                    
            // DONE: hier handleMouseLeave wieder "unbind"en
                    
            jQ("#languageLi").unbind('mouseleave'handleMouseLeave);
                    
            // DONE: hier handleMouseEnter "bind"en
                    
            jQ("#languageLi").bind('mouseenter'handleMouseEnter);
                    
            jQ("#langNav").slideUp(MenuSpeed
                    function() { 
                        
            jQ("#languageLink").css("background-position""bottom");
                    });
                };
                
            // DONE: hier handleMouseEnter "bind"en
                
            jQ("#languageLi").bind('mouseenter'handleMouseEnter);
            //...
            }); 
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar


            • #7






              sollest du mal nach Berlin kommen haste nen Drink bei mir gut
              "I don't want to belong to any club that would accept me as a member."

              Groucho Marx

              Kommentar

              Lädt...
              X