[jQuery] Re: Newbie: Sequencial fadeOut / FadeIn effects

Hi Alexandre,
You must call the fadeIn() as soon as the fadeOut() ends, so
move the fadeIn() from the chaining assigning a callback function to fade
Out() like the following:

$(document).ready(function() {
$("#menu a").hover(function(){
$section = $(this).attr("name");
$("#fadeitem").find("div:visible").fadeOut("slow",
function() { // here the trick
$("#"+$section).fadeIn("slow");
});
});

Maurício

-----Mensagem Original-----
De: "Alexandre" <alexandre.chabran@gmail.com>
Para: "jQuery (English)" <jquery-en@googlegroups.com>
Enviada em: sábado, 1 de novembro de 2008 10:41
Assunto: [jQuery] Newbie: Sequencial fadeOut / FadeIn effects

>
> 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>