CODEWITHSUNDEEP
javascriptjqueryfadeinfadefadeout
lisovaccaro
lisovaccaro

Reputation: 33946

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

Upvotes: 4

Views: 8382

Answers (3)

Shawn31313
Shawn31313

Reputation: 6052

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);
});

Upvotes: 12

misha312
misha312

Reputation: 1713

I think you can use callback...

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

this is the most stable way....

Upvotes: 4

vasanth.v
vasanth.v

Reputation: 213

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");

Upvotes: 1

Related Questions