Question

我有一个#wrapper有三个元素。我fadeIn / slideToggle然后淡出整个屏幕。然后，一旦#wrapper/whole屏幕淡出，我就试图fadeIn一张新照片。

因为某些原因导致fadeIn的最后#baby-grand无效。知道我做错了吗？

这是脚本：

$(document).ready(function() {

    $("#paul-bedal").hide();

    $("#is-amidst").hide();

    $("#Paul-picture").hide();

    $("#baby-grand").hide();

    $(window).load(function() {
        $("#paul-bedal").fadeIn(3000, function() {
            $("#is-amidst").slideDown(4000, function() {
                $("#Paul-picture").fadeIn(3500, function() {
                    $("#wrapper").fadeOut(5000, function() {
                        $("#baby-grand").fadeIn(3500);
                    });
                });
            });
        });
    });
});

CSS：

body {
    min-width:960px;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

#wrapper {
    min-width:960px;
    max-width:1200px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

#paul-bedal {
    height:150px;
    width:650px;
    margin-top:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    font-size:95px;
    color:#E3E3E3;
    text-shadow:5px 5px 5px #f6f6f6;
}

#is-amidst {
    height:100px;
    width:650px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    font-size:55px;
    color:#E3E3E3;
    font-style:italic;
    text-shadow:5px 5px 5px #f6f6f6;
}

#Paul-picture {
    background-image:url(/images/Paul-Bedal.png);
    background-repeat:no-repeat;
    width:250px;
    height:500px;
    float:right;
    position:absolute;
    margin-right:50px;
    margin-top:-100px;
}

#baby-grand {
    background-image:url(/images/baby-grand-piano.png);
    width:100%;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
}


<div id="wrapper">
    <div id="Paul-picture"></div>

    <div id="paul-bedal">
        Paul Bedal
    </div>

    <div id="is-amidst">
        ~is amidst right now...
    </div>
</div>
<div id="baby-grand"></div>

另请注意，#baby-grand未包含在#wrapper内，因此这是一个非常简单的维护页面。但是，最后#baby-grand淡入淡出不适用于jQuery。

Answer 1

你在＃baby-grand上的背景是一个psd。浏览器无法显示它。

Answer 2

原因是它是空的并且没有任何高度。它实际上已经消失，但没有任何东西可以显示！尝试通过css给它一些高度，看它是否有效。

旧的一个褪色后，jQuery在新的包装器中淡出

2 个答案: