jQuery fadeOut一个div，fadeIn另一个在它的位置

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);
    $('#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");