JQuery fadeIn problem

[son.of.the.morning]

Hey guys, i was wondering if you could help me with a little JQuery problem?

 

I have a list menu with a sub menu and i want to create a condision were when the sub menu changes to a vissible display i want it to fadeIn using Jquery rather than it just apearing.

 

Any ideas?

 

[Adam]

With just the jQuery core (UI not required), you can use the show() method with a delay passed in to achieve the fade effect you're after.

[son.of.the.morning]

Sorry i forgot to add the code i have been working on. The code is valid but because the display is set to 'non' initially then it doesn’t take effect, so i need a condition that’s going to say if the display = to block (visible) then fadeIn.

 

$(document).ready(function() {
	$('.SubFade').hover(function() {
		var div = $('.subMenu, this');
		div.fadeIn(2500);	
	});

    });

[son.of.the.morning]

I am going to re-use it so i really would like to use this method.

[Adam]

Use toggle() instead then - that automatically switches the CSS display style and detects the current state.

[son.of.the.morning]

How would i apply this in code, sorry am not use to working with JQuery. This is actauly my first try. lol

[son.of.the.morning]

I have tryied to use toggle() here but it works funny if i rollover the first time the menu fades in but if i then rollover it again the views normal then fades out. I really need it to fade out on hover and when the cursor leaves the sub menu i want it to fade out. This one is realy doing my nut in right now!

 

	$(document).ready(function(){
	$('.SubFade').hover(function(){
		$('.subMenuContainer').toggle(2000);
	});
});

[Adam]

hover() accepts two call backs, one for mouseover and one for mouseout. You need to call the toggle function in each:

 

	$(document).ready(function(){
	$('.SubFade').hover(function(){
		$('.subMenuContainer').toggle(2000);
	}, function() {
		$('.subMenuContainer').toggle(2000);
	});
});