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

【问题标题】：jQuery fadeOut one div, fadeIn another on its placejQuery fadeOut 一个 div，fadeIn 另一个在它的位置
【发布时间】：2011-06-30 06:11:35
【问题描述】：

我正在尝试一个简单的 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>

我该怎么做？我做错了什么？

【问题讨论】：

标签： javascript jquery fadein fade fadeout

【解决方案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>

旧：

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

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

【讨论】：

【解决方案2】：

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

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

这是最稳定的方式....

【讨论】：

【解决方案3】：

语法错误应该是

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

而不是

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

同样

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

而不是

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

【讨论】：

我通过使用 javascript 擦除 inicio 中的所有 HTML 来修复它。然而，即使在更正代码之后，div id="inicio" 仍然会再次出现。不知道为什么。想正确地编写代码。