我的jQuery .hide()动画没有像预期的那样工作

My jQuery .hide() animation not working as expected

本文关键字:工作 hide jQuery 动画 我的      更新时间:2023-09-26

加载动画应该显示一秒钟,然后隐藏。这不是躲起来。我相信这是JS的失败(因为它管理隐藏)。

见:http://www.visionchurchnorth.org.nz/temp/index

正常工作的例子:http://www.championfreight.co.nz/index

Html

<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1996">
        <div id="followingBallsG" style="left:50%; margin-left:-50px; top:56%; z-index:1998">
    <div id="followingBallsG_1" class="followingBallsG">
    </div>
    <div id="followingBallsG_2" class="followingBallsG">
    </div>
    <div id="followingBallsG_3" class="followingBallsG">
    </div>
    <div id="followingBallsG_4" class="followingBallsG">
    </div>
    </div>
    </div>
CSS

#backgroundcolor{
background-color:white;
background-image:url('preno_logo_02_100_100.jpg');
background-position:center;
background-repeat:no-repeat;
}
#followingBallsG{
position:relative;
width:100px;
height:8px;
}
.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#followingBallsG_1{
-moz-animation-delay:0s;
}
#followingBallsG_1{
-webkit-animation-delay:0s;
}
#followingBallsG_1{
-ms-animation-delay:0s;
}
#followingBallsG_1{
-o-animation-delay:0s;
}
#followingBallsG_1{
animation-delay:0s;
}
#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}
#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}
#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
@-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
@-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
@-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
@-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
@keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}

JS

(function(){
    var didDone = false;
    function done() {
        //Prevent multiple done calls.
        if(!didDone)
        {
            didDone = true;
            //Loading completion functionality here.
            $('#followingBallsG').hide();
            $('#backgroundcolor').hide();
        }
    }
    //Variables to keep track of state.
    var loaded = false;
    var minDone = false;
    //The minimum timeout.
    setTimeout(function(){
        mindone = true;
        //If loaded, fire the done callback.
        if(loaded)
        {
            done();
        }
    }, 1000);
    //The maximum timeout.
    setTimeout(function(){
        //Max timeout fire done.
        done();
    }, 5000);
    //Bind the load listener.
    $(window).load(function(){
        loaded = true;
        //If minimum timeout done, fire the done callback.
        if(minDone)
        {
            done();
        }
    });
})();

似乎您忘记在HTML中链接到jQuery了。在链接到页面的JavaScript之前,将以下内容添加到HTML 中:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

没有jquery所以

$(window).load(function(){
       //...
}

没有做