Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript / DOM / AJAX: jQuery: mouseover/mouseout problem

Bottom of Page

1 to 4 of 4

  1.  
  1.  permalink
    Hi everyone. Long-time listener, first-time caller.

    I'm having an issue with a navigation menu that autohides its sub-links until you mouseover. My problem is that the mouseover and mouseout functions are triggered constantly.

    I was talking to someone in #jquery on freenode about it, and they said that I had to stick a conditional in and set a variable to the state of the menu. I've tried a few different approaches, and I'm pretty much stuck.

    Here is the code:



    $(document).ready(function() {
    // Collapse everything but the first menu:
     $("#nav > li > a").find("+ ul").hide();

     // Expand or collapse:
     $("#nav a.daddy").mouseover(function() {
     $(this).find("+ ul").fadeIn("slow");
     });
     $("#nav a.daddy").mouseout(function() {
     $(this).find("+ ul").pause(2000).fadeOut("slow");
     });
     
     });


    So does anyone know how I can modify this so that the mouseout can't be triggered while the mouseover is happening? Or so the mouseover doesn't happen again while you are already mouse-ing over?

    edit: I forgot to mention also that when I mouseover any of the links, those mouseover/out events get put into a queue so that if I mouseover 5 links, then mouse out, it will fade in and out all of the subnav 5 times. (!!)
  2.  permalink

    Update!



    This:



    $(document).ready(function() {
    // Collapse everything but the first menu:
     $("#nav > li > a").find("+ ul").hide();

     // Expand or collapse:
     $("#nav a.daddy").mouseover(function() {
     $(this).find("+ ul").fadeIn("slow");
     shown = true;
     }
    );

    if (shown = true) { 
     $("#nav a.daddy").mouseout(function() {
      $(this).find("+ ul").pause(2000).fadeOut("slow");
     });
     shown = false;
    } 
    });



    ... is doing almost exactly what I need, except that when I mouse out, the subnav fades out, then back in. (?) But the constant fading in and out has stopped.
  3.  permalink
    I've noticed that using mouseover/out events are a pain in the butt to control with JQuery, so I try and stick with the alternative "hover" event which has the same control but has an added condition to see if the mouse is still within the area of the object you're hovering over. So even if the object is not visible, the hover event knows whether you're still over the object or not. The mouseover/out event doesn't do that. Hence the repetitive fadeOut/In issues.

    Also, there is a JQuery plugin called "hoverIntent" that does a great job of minimizing repetitive effects caused by unintentional hover events triggered by a twitchy mouse hand. So normally, using the hover event, if you were to quickly hover over and out of an object 5 times, a JQuery will repeat the functions attached to the hover event 5 times regardless of where your mouse ends up. The hoverIntent plugin gets rid of that unwanted queue of effects.
  4.  permalink
    Maybe have a look at the Superfish plugin which creates menus just like this and more. It can also auto-detect and use the hoverIntent plugin mentioned by latinomigs - although it is not required. You can find the link to the Superfish demo page from jQuery's plugin page.

1 to 4 of 4

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page