第一次淡入有時似乎不起作用（jQuery）

Question

我創造了一個小動畫故事。 問題是有時第一次淡入淡出不會觸發。 這似乎只是有時發生，在某些情況下我似乎無法弄清楚。 據我所知，它與緩存有關。

以下是經常出現問題的頁面的代碼：

//waits until document is open

$(window).load(function() {

    //if it's night time when you read this it displays a night time photo, if it's day time it's a day time photo... don't know how many people might notice

    if (time === "night"){
        $.backstretch("downtownnight.jpg");

        //makes the font white with a black outline so you can read it easily on the night photo
        $("#content").css("color","#FFFFFF");
        $("#content").css("text-shadow","1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000");

    }
    else {
        $.backstretch("downtownday.jpg");

        $("#content").css("text-shadow","1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff"); }
});


$(document).ready(function(){

    //fades in the first line of text

    $("#partFive").fadeIn(2000)

    setTimeout(function () {

        //fades in the second line of text

        $("#partFive").fadeOut(2000)

        setTimeout(function () {


            $("#awesome").fadeIn(3000)

            setTimeout(function () {


                $("#awesome").fadeOut(2000)

                setTimeout(function () {


                    $("#awesome").fadeOut(1000)

                    setTimeout(function () {


                        $("#partSix").fadeIn(2000)


                    }, 2000);

                }, 2000);

            }, 2000);

        }, 2000);

    }, 2000);

});

我在堆棧溢出中發現了此問題以停止緩存問題，但似乎無濟於事

<!-- ignores any cache you might have! -->

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

您可以在此處找到該網站的測試版本： http : //www.chilltoday.com/test/

要求使用HTML，它在pastebin中： http : //pastebin.com/XyM9si2c

Answer 1

如果要使用fadeIn效果，則需要在調用fadeIn（）之前確保#partFive在開始時是隱藏的。

我看不到您的代碼有什么問題。 但是，我添加了“ display：none;”。 對於所有div，您都需要fadeIn（）似乎對我有用。

#partFive, #awesome, #partSix {
    display: none;
}

http://jsfiddle.net/EYWML/