jQuery淡出一个div，淡入另一个div [英] jQuery fadeOut one div, fadeIn another on its place

问题描述

我正在尝试使用一个简单的jQuery脚本淡出一个div，并在该位置淡入另一个div，但是由于某种原因，第一个div永不淡出.代码可能是一个明显的问题，但我似乎无法弄清楚.

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?

推荐答案

有一种简单的方法可以做到这一点:

There is a simple way to do this:

$('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>

这篇关于jQuery淡出一个div，淡入另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！