Jquery Fadeout One Div, Fadein Another On Its Place

I'm trying a simple jQuery script to fadeout one div and fadein another one in it's place but for some reason the first div never fades out. It's probably an obvious problem with t

Solution 1:

UPDATE

The simplest way to do this is by using a callback:

$('a').click(function(){
    $('#fadeout').fadeOut(300, function () {
         $('#fadein').fadeIn(300);
    });
});

then the HTML:

<ahref="#">In/Out</a><divid="fadeout">Fade Out</div><divid="fadein"style="display:none;">Fade In</div>

OLD:

There is a simple way to do this:

$('a').click(function(){
    $('#fadeout').fadeOut(300);
    $('#fadein').delay(400).fadeIn(300);
});

Solution 2:

I think you can use callback...

$('#fadeout').fadeOut(300, function(){
                                      $("#fadein").fadeIn(300);
                                      });

this is the most stable way....

Solution 3:

There is a syntax error it should be

$("#inicio").fadeOut("slow");

and not

$("inicio").fadeOut("slow");

Similarly

$("#cuerpo").fadeIn("slow");

and not

$("cuerpo").fadeIn("slow");