首先，渐变有时似乎不起作用(jquery)

First fadein doesn't seem to work sometimes (jquery)

本文关键字：不起作用 jquery 渐变 首先      更新时间：2023-09-26

我创建了一个小动画故事。问题是，有时第一次退色不会触发。这似乎只会偶尔发生，在某些情况下，我似乎不能弄清楚。据我所知，这与缓存有关。

下面是一个经常出现这个问题的页面的代码:

//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

如果您想让fadeIn生效，您需要确保#partFive在调用fadeIn()之前隐藏在开头。

我看不出你的代码有什么问题。但相反，我添加了"display:none;"到你需要的所有div fadeIn()，它似乎为我工作。

#partFive, #awesome, #partSix {
    display: none;
}
http://jsfiddle.net/EYWML/

相关文章：