Hi all,
I wonder if someone here could help me with a basic js syntax I'm not
familiar with.
The portion of script shown below is performing a simple "hide div
content" > "show another div content" when hovering on a link. It
works well, but these two actions are performed simultaneously. I
would like to hide first then show the div content.
I've run over many script examples and solutions, and it seems that I
should insert the fadeIn() into the fadeOut() function. I was not able
to make this way works, so I'm open to any other solution or better
trick.
Thank you for any help.
---script---
$(document).ready(function() {
$("#menu a").hover(function(){
$section = $(this).attr("name");
$("#fadeitem").find("div:visible").fadeOut("slow");
$("#"+$section).fadeIn("slow");
});
});
---body---
<ul id="menu">
<li id="link1"><a href="" name="content-about">about link</a></li>
<li id="link2"><a href="" name="content-menu1">menu1 link</a></li>
<li id="link3"><a href="" name="content-menu2">menu2 link</a></li>
</ul>
<div id="fadeitem">
<div id="content-about">about content</div>
<div id="content-menu1">menu1 content</div>
<div id="content-menu2">menu2 content</div>
</div>
