jQuery fade in and out

[Imoddedu]

Hey there! I have a question, how can I make it so that if a user hovers over a link, then a certain div appears and stays there, and then if the user hovers onto another div, the exising div fades out and a new one fades in?

[brucemand]

Hey there! I have a question, how can I make it so that if a user hovers over a link, then a certain div appears and stays there, and then if the user hovers onto another div, the exising div fades out and a new one fades in?

hmm... let a beginner have a crack at this...

<div id="one" onmouseover="do_fade_in('one')" >menu link</div><div id="two" onmouseover="do_fade_in('two')" >menu link</div>

function do_fade_in(elem) {var menu_on=document.getElementById(elem);menu_on.style=jQuery(??)-whatever-thingamabob;var other_menu=document.getElementsByTagName("div") // probably ByClassName would be better.(JS"foreach"(i forget the for...in syntax by heart ) other_menu as one_by_oneone_by_one.style=$(?)jQuery.switch'emolov;}

[Imoddedu]

I'm afraid I don't understand that o.O

[radish]

hmm... let a beginner have a crack at this...

<div id="one" onmouseover="do_fade_in('one')" >menu link</div><div id="two" onmouseover="do_fade_in('two')" >menu link</div>

I know that you mean well, i just want to point out that he is asking for jquery specific code. From what I understand anyway.

I'm afraid I don't understand that o.O

From what I can Tell edGetItTypee is trying to explain how to do mouseover to start your jquery code. However with jquery it is not necessary to use javascript handlers in the HTML document.

$("a#your_link").hover(function() {	if ( $("div#other_div").css('display') != none ) { $("div#other_div").fadeout(100); } 	$("div#some_div").fadeIn(100);}, // do nothing );$("a#other_link").hover(function() {	if ( $("div#some_div").css('display') != none ) { $("div#some_div").fadeout(100); } 	$("div#other_div").fadeIn(100);}, // do nothing );

The gist of this is that it checks to see if an element is being displayed using .css()then it fades out the element and fades in the new one.the reason this works is because when jquery fully fades an element out it sets the display property to none so that it doesnt take up physical space in the document while invisible.

[thescientist]

I know that you mean well, i just want to point out that he is asking for jquery specific code. From what I understand anyway.From what I can Tell edGetItTypee is trying to explain how to do mouseover to start your jquery code. However with jquery it is not necessary to use javascript handlers in the HTML document.

$("a#your_link").hover(function(){$("div#some_div").fadeOut(100);$("div#some_div").fadeIn(500);});

this code is lifted directly off of the jquery API

inline javascript can be accomplished without jQuery too, however it appears you are correct that that is what the OP wants. although most of your code snippet heads in the right direction, it appears that it leaves out a few things. It should target multiple links, not one by id. Part of the fadeOut should load some content into a target div, and then the fadeIn should be factored into the the callback of the fadeOut.

var targetDiv = $('#targetDiv'); //a div styled somewhere on the page, probably with absolute positioning, initially set to display:none;$('.links').hover(function(){  targetDiv.fadeOut('slow', function(){	//added callback for when previous content fades out, it's ok if the div is already hidden, it won't hurt to hide something that is already hidden	targetDiv.html('Content to be display next'); //prepare the content to be displayed next based on the link clicked.  this will be specific to your application.	targetDiv.fadeIn('slow');  //now that the prep work is complete, we can fade in the new content};

http://api.jquery.com/hover/http://api.jquery.com/fadeOut/as for how to load the div content, you could give the links a specific class name to match an id of a div somewhere on the page, and use that as a mapping in order to give jquery an id target, and get it's content that way. (you would want to consider having all the div's already on the page, but just hidden). Unless you are planning on doing this via ajax, but mapping mechanism is still required. there are also more specific ways to target the links rather than using a class, so I would advocate that, like putting all the links in a div, and then using something like:

$('#navLink:a').hover(function(){

http://api.jquery.com/category/selectors/

[brucemand]

I know that you mean well, i just want to point out that he is asking for jquery specific code. From what I understand anyway.

well yes, it's also for my own JS ability in being able to solve a third-party situation.i did disclose i was a beginner which should indicate "buyer beware"

From what I can Tell edGetItTypee is trying to explain how to do mouseover to start your jquery code. However with jquery it is not necessary to use javascript handlers in the HTML document.##CUT##

i'm not up to jQuery yet, so i can only assume that jQuery is basically JS and follows the same basic rules.that sounds interesting though. (i suppose the event handlers are all in the jQuery.js file ?)

[thescientist]

well, I think what they where trying to say is that it still uses the same native JS event handlers, but as with JS anyway, you don't have to write your event handlers 'inline'.