jquery - jQuery mouseenter/mouseleave virker ikke som forventet - Udvikleren.dk

Tags: jquery

<< < 1 2 > >>

Bruger #14218 @ 29.01.12 21:44

Jeg sidder og koder lidt jQuery for svigerfar.
Jeg har dog det problem at hvis man tager musen hurtigt over .menu-item og væk igen, fader .inner-menu-item ikke ud..

JScript kode

 $(".menu-item").mouseenter(function(){
         if(!$(this).hasClass("aktiv"))
         {
             $(this).css("z-index","1002");
             $(".black_overlay").fadeIn(100);
             
             var content_height = $("#inner-content").outerHeight();
             $(this).animate({height : 120 + content_height + "px"},
                 { 
                     duration: 300,
                     complete: function()
                     { 
                         $(this).find(".inner-menu-item").fadeIn(300);
                     }
                 }
             );
         }
     }).mouseleave(function(){
         
         if(!$(this).hasClass("aktiv"))
         {
             var theElement = $(this);
             theElement.find(".inner-menu-item").fadeOut(300, function(){
                 theElement.animate({height : "115px"},
                 { 
                     duration: 300,
                     complete: function()
                     {
                         $(".black_overlay").fadeOut(100, function() { theElement.css("z-index","1000")});
                     }
                 });
             });
         }
     });

Indlæg senest redigeret d. 29.01.2012 21:47 af Bruger #14218

16 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #14816 @ 29.01.12 22:23

451

Kan det være fordi fadeOut ikke er færdig, inden musen er ude? Måske et long shot.
Kunne muligvis have noget med køen at gøre, prøv evt. med http://api.jquery.com/clearQueue/

Bruger #10216 @ 30.01.12 12:46

4.283

se evt. video: http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm

Bruger #14816 @ 29.01.12 22:13

451

Noget tid siden jeg har leget med det, men skal mouseleave ikke være selvstændig?

altså

JScript kode

 $("menu-item").mouseleave(function(){
          
          if(!$(this).hasClass("aktiv"))
          {
              var theElement = $(this);
              theElement.find(".inner-menu-item").fadeOut(300, function(){
                  theElement.animate({height : "115px"},
                  { 
                      duration: 300,
                      complete: function()
                      {
                          $(".black_overlay").fadeOut(100, function() { theElement.css("z-index","1000")});
                      }
                  });
              });
          }
      });

Bruger #14218 @ 29.01.12 22:16

Ikke i følge jQuery docs:

jQuery Docs eksempel

Der står således:

JScript kode

 var n = 0;
     $("div.enterleave").mouseenter(function(){
       $("p:first",this).text("mouse enter");
       $("p:last",this).text(++n);
     }).mouseleave(function(){
       $("p:first",this).text("mouse leave");
     });

Bruger #14218 @ 29.01.12 22:34

Du har ret i at det er fordi fadeOut ikke er færdig

Jeg smed en theElement.stop(); ind.. og nu virker det

JScript kode

 .mouseleave(function(){
         
         if(!$(this).hasClass("aktiv"))
         {
             var theElement = $(this);
             theElement.find(".inner-menu-item").fadeOut(300, function(){
                 theElement.stop(); //<--- Her :D
                 theElement.animate({height : "115px"},
                 { 
                     duration: 300,
                     complete: function()
                     {
                         $(".black_overlay").fadeOut(100, function() { theElement.css("z-index","1000")});
                     }
                 });
             });
         }
     });