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?

回答1:

There is a simple way to do this:

$('a').click(function(){
    $('#fadeout').fadeOut(300);
    $('#fadein').delay(400).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>

回答2:

I think you can use callback...

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

this is the most stable way....

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

来源：https://stackoverflow.com/questions/6530626/jquery-fadeout-one-div-fadein-another-on-its-place