javascript - My jQuery .hide() animation not working as expected -

Loading the animation should look for one second and then hide it is not hidden. I believe this is JS Is failing (as it is to hide the rule).

See:

Work it correctly:

HTML

  & lt; Div id = "backgroundcolor" style = "position: fixed; width: 100%; height: 100%; left: 0%; top: 0%; z-index: 1996" & gt; & Lt; Div id = "following ballsG" style = "left: 50%; margin-left: -50px; top: 56%; z-index: 1998" & gt; & Lt; Div id = "following ballsG_1" class = "following ballsG" & gt; & Lt; / Div & gt; & Lt; Div id = "following ballsG_2" class = "following ballsG" & gt; & Lt; / Div & gt; & Lt; Div id = "following ballsG_3" class = "Following BallsG" & gt; & Lt; / Div & gt; & Lt; Div id = "following ballsG_4" class = "following ballsG" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

css

  #backgroundcolor {background color: white; Background Image: URL ('preno_logo_02_100_100.jpg'); Background position: center; Background repeat: do not repeat; } #followingBallsG {status: relative; Width: 100px; Height: 8px; }. FollowingsBulzy [background color: # 000000; Status: Completed; Top: 0; Left: 0; Width: 8px; Height: 8px; -moz-border-radius: 4px; -moz- animation-name: bounce_followingBallsG; -moz- Animation-duration: 1.4s; -moz-animation-count of travel: infinity; -moz- animation-direction: linear; -webkit-border-radius: 4px; -webkit- Animation-name: bounce_followingBallsG; -webkit- Animation-duration: 1.4s; -webkit- Animation- Count of Travel: Infinity; -webkit- animation-direction: linear; MS-Border-Radius: 4px; MS-Animation-name: bounce_followingBallsG; MS-Animation-Duration: 1.4s; MS-Animation- Count of Travel: Infinity; MS-animation-direction: linear; -o-border-radius: 4px; O-animation-name: bounce_followingBallsG; O-animation-duration: 1.4s; O-animation - Count of travel: infinity; -o-animation-direction: linear; Border-radius: 4px; Animation-name: bounce_followingBallsG; Animation-period: 1.4s; Animation- Count of Travel: Infinity; Animation-direction: linear; } #The following BallsG_1 {-Moz-Animation-Delay: 0S; } #The following BallsG_1 {-webkit-animation-delay: 0S; } #The following BallsG_1 {-mms-animation-delay: 0s; } #The following BallsG_1 {-o-animation-delay: 0s; } #The following BallsG_1 {Animation-Delay: 0s; } #The following BallsG_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; } #The following BallsG_3 {-Moz-animation-delay: 0.28 s; -webkit- animation-delay: 0.28s; MS-Animation-Delay: 0.28s; -o-animation-delay: 0.28s; Animation-Delay: 0.28s; } #The following BallsG_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; } @ -mose-keyframe bounce_following_balls_ {0% {left: 0px; Background color: # 000000; } 50% {LEFT: 93px; Background color: # 000000; } 100% {LEFT: 0 pixels; Background color: # 000000; }} @ -webkit-keyframes bounce_followingballsG {0% {left: 0px; Background color: # 000000; } 50% {LEFT: 93px; Background color: # 000000; } 100% {LEFT: 0 pixels; Background color: # 000000; }} @ -ms-keyframe bounce_following_balls_ {0% {left: 0px; Background color: # 000000; } 50% {LEFT: 93px; Background color: # 000000; } 100% {LEFT: 0 pixels; Background color: # 000000; }} @ -O-keyframe bounce_following_balls {0% {left: 0px; Background color: # 000000; } 50% {LEFT: 93px; Background color: # 000000; } 100% {LEFT: 0 pixels; Background color: # 000000; }} @keyframe bounce_following_balls {0% {left: 0px; Background color: # 000000; } 50% {LEFT: 93px; Background color: # 000000; } 100% {LEFT: 0 pixels; Background color: # 000000; }}  

JS

  (function () {var didDone = false; function done () {// stop multiple calls made.) { DidDone = true; // Here is the functionality of loading completion. $ ('#bollg') Hide (); $ ('# Backgroundcolor'). Hide ();}} // Keep track of variables. Var load = false; Var minDone = false; // minimum timeout SetTimeout (function () {mindone = true; // If loaded, fire the full callback if (load) {done ();}}, 1000); / / Maximum timeout settime (function () {// maximum timeout has been burnt. Done ();}, 5000); // Bind load listener. $ (Window) .load (function () {loaded = true; / / If the minimum time has expired, then make a complete callback. If (minode) {done ();}}};}) ;  

It seems that you forgot to link to jQuery in your HTML. Link your JavaScript to before your HTML: JavaScript

  & lt; Script src = "// code.jquery.com/jquery-1.11.0" .min.js "& gt; & lt; / script & gt;