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

Alexandre
Please, have a look at: http://jsbin.com/oluba
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 12:00
Assunto: [jQuery] Re: Newbie: Sequencial fadeOut / FadeIn effects

Thanks a lot for answering me, but I've already tried that with no
success.

The two solutions :
* http://proz.co.nz/public/test1.html
* http://proz.co.nz/public/test2.html

The first one works but simultaneously, the second one just don't
work :/
Where could I be wrong ?
As always, it's a human error, I just can't see where...

On Nov 1, 2:31 pm, "Mauricio \(Maujor\) Samy Silva"
<css.mau...@gmail.com> wrote:
> 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.chab...@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>