jQuery исчезает из одного div, исчезает в другом на его месте

Question

Я пытаюсь с помощью простого сценария jQuery постепенно исчезнуть с одного div и добавить на его место другой, но по какой-то причине первый div никогда не исчезает. Вероятно, это очевидная проблема с кодом, но я не могу разобрать его.

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

Как мне это сделать? Что я делаю не так?

Answer 1

Есть простой способ сделать это:

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

тогда HTML:

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

<div id="fadeout">Fade Out</div>
<div id="fadein" style="display:none;">Fade In</div>

Answer 2

Я думаю, что вы можете использовать обратный вызов ...

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

это самый стабильный способ ....

Answer 3

Есть синтаксическая ошибка должно быть

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

а не

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

Аналогично

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

а не

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