• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[jQurery] Help with a menu transition effect please

Question

Bollard    0

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> 	

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Dom    2

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

Share this post


Link to post
Share on other sites
  • 0
Duncank    0

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.