jQuery help

ringo747 · 31 Mar 2012 at 21:24

I have a menu with a list of li tags and then a hidden subnav menu which is made visible on hover. I can't really post up the code as the markup is generated by a SharePoint control and some javscript functions that I can't identify.

At the moment when I hover over an list item in the navigation bar then its sub-menu becomes visible. On leaving the item, the sub-menu disappears. Is there an easy way to make the appear/disappear to use a gradual fade in/out? I'm aware of the jQuery fadein/out functions but I can't seem to put anything together that works.

I tried using onhover on the <li> item but when I scrolled down to the sub-menu it all disappeared.

Is there a few lines of easy code I can add to use fades?

ringo747 · 31 Mar 2012 at 22:29

I had something very like the code you posted but if I moved the mouse from #myid down into the submenu then the submenu disappeared due to the fadeOut call.

Will look at slideDown/Up.

Edit: I have got a fade working just as a test but when I move across the menu items quickly the fade doesn't work. It appears as if I have to wait for one event to finish before another can work. Am I missing something obvious here?

ringo747 · 1 Apr 2012 at 13:53

If I hover from the main page area to a navigation bar item the fade in will work nicely. If I move quickly between other navigation items the animation will only work unless i wait a few seconds for the animation to finish. Does that make sense?

I haven't seen the stop() function used before - surely it would cut the animation off which wouldn't look good?

ringo747 · 1 Apr 2012 at 15:44

That sums up my problem exactly - great link. Thanks

ringo747 · 1 Apr 2012 at 18:31

This is my code so far but not having any luck in getting it to work:

box1Watcher.isHoveringOver() returns true/false if the mouse is over an item or not.

Code:

    $('.menu-item').hover(function() {
        $('ul.dynamic').stop(true, true).fadeIn();
    }, function() {
    	setTimeout( function(){
        	if ((box1Watcher.isHoveringOver()) || (box2Watcher.isHoveringOver())) {
        		//alert('true');//$('.s4-tn ul.dynamic').css('display', 'block');
       		}        	
        	$('ul.dynamic').stop().fadeOut('fast')
        	
        }, 1000 ); 
    });

ringo747 · 3 Apr 2012 at 16:54

Managed to get this sorted... there was a 1px margin-top setting on the dropdown which kept triggering my mouseout event... one of those simple things you seem you miss so easily.