Question

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 the code but I cannot seem to make it out.

<style>
    #cuerpo { display: none; }
</style>

<div id="cuerpo"></div>
<div id="inicio"></div>

<script>
    function delayed() {
        $("div").fadeIn(3000, function () {
            $("cuerpo").fadeIn("slow");
        });
    }
    $("a").click(function () {
        $("inicio").fadeOut("slow");
        setTimeout("delayed()",500);
    });
</script>

How should I do it? What am I doing wrong?

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

<a href="#">In/Out</a>

<div id="fadeout">Fade Out</div>
<div id="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);
});