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?

Longbow · 31 Mar 2012 at 22:09

I think you need something like this:

Code:

$("#myid").hover(
	function () {
		$("#someotherid").fadeIn("fast");
	}, 
	function () {
		$("#someotherid").fadeOut("fast");
	}
);

Also be aware of .slideDown(500) & .slideUp(500), they might be better for what you need.

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?

Tripnologist · 1 Apr 2012 at 02:48

ringo747 said:
It appears as if I have to wait for one event to finish before another can work. Am I missing something obvious here?

I'm not sure I'm understanding your problem correctly, but do you mean that they are queuing up so you have to wait for them all to run? If so, .stop() is what you need.

http://api.jquery.com/stop/

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?

Tripnologist · 1 Apr 2012 at 15:09

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

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

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.