[jQurery] Help with a menu transition effect please

[Bollard]

Hello all,

Im currently working on a new website and a new drop down menu using this tutorial

So far, this is what i have. It all seems to be working OK so far, but i dont like the fade transition its using. I would prefer something more like on the Nvidia site where there isnt a "fade lag".

I tried to use jQuery's FadeIn transition instead of the current fadeTo - but it just seemed to break the whole menu. So, how do i go about changing the transition effects (and trying some out), simply copying and pasting over the current fadeTo doesnt seem to work?

Thanks for any help

This is the code:

<script type="text/javascript">
$(document).ready(function() {

	function megaHoverOver(){
		$(this).find(".sub").stop().fadeTo('fast', 1).show();

		//Calculate width of all ul's
		(function($) { 
			jQuery.fn.calcSubWidth = function() {
				rowWidth = 0;
				//Calculate row
				$(this).find("ul").each(function() {					
					rowWidth += $(this).width(); 
				});	
			};
		})(jQuery); 

		if ( $(this).find(".row").length > 0 ) { //If row exists...
			var biggestRow = 0;	
			//Calculate each row
			$(this).find(".row").each(function() {							 
				$(this).calcSubWidth();
				//Find biggest row
				if(rowWidth > biggestRow) {
					biggestRow = rowWidth;
				}
			});
			//Set width
			$(this).find(".sub").css({'width' :biggestRow});
			$(this).find(".row:last").css({'margin':'0'});

		} else { //If row does not exist...			
			//Set Width 
 	$(this).calcSubWidth(); 

 	var o = $(this).find('.sub').offset();
 	var p = $('#megaMenu').offset();
 	var pw = document.getElementById('megaMenu').clientWidth;
 	var tw = rowWidth;
 	o.left = o.left - p.left;
 	var tml = (tw + o.left) - pw;

 	$(this).find(".sub").css({'width' : rowWidth}).css({'margin-left':'-' + tml - 20 + 'px'}); 
		}
	}

	function megaHoverOut(){ 
	 $(this).find(".sub").stop().fadeTo('fast', 0, function() {
		 $(this).css({'margin-left':'0'});
 	$(this).hide(); 
	 });
	}

	var config = {	
		 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)	
		 interval: 100, // number = milliseconds for onMouseOver polling interval	
		 over: megaHoverOver, // function = onMouseOver callback (REQUIRED)	
		 timeout: 500, // number = milliseconds delay before onMouseOut	
		 out: megaHoverOut // function = onMouseOut callback (REQUIRED)	
	};	

	$("ul#topnav li .sub").css({'opacity':'0'}); 
	$("ul#topnav li").hoverIntent(config);
});
</script> 	

[Dom]

Change the Timeout in var config to something lower, it should work the way you want then.

[Duncank]

If you want to use FadeIn and FadeOut, you have to remove all the "opacity"-things in the css file (and in the bottom of your javascript-code) for this selector and set the "display" to "none". FadeIn and Out toggles this from none to normal, with a fade-effect :D

(Btw, on the nvidia site, the menu's do not fade on my pc, they just appear and disappear. You can do that with .hide() and .show(). In this case you also need to remove the opacity-things and add display : none.)

Good luck!