jQuery fadeOut 一个 div，fadeIn 另一个 div 在其位置

Question

我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 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, function () {
         $('#fadein').fadeIn(300);
    });
});

然后是 HTML:

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

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

OLD:

有一个简单的方法可以做到这一点：

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

Answer 2

我认为你可以使用回调...

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

这是最稳定的方式...

Answer 3

有语法错误
应该是

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

，而不是

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

同样

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

，而不是

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