我的jQuery .hide()动画没有像预期的那样工作
My jQuery .hide() animation not working as expected
加载动画应该显示一秒钟,然后隐藏。这不是躲起来。我相信这是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(){
//...
}
没有做
相关文章:
- 函数hide()、prev()、show()被组装以获得所需的结果,但无法理解其工作原理
- show-hide只在ajax调用中第一次工作
- ng show和ng hide don'I don’我一秒钟都不工作
- 使ng-show/ng-hide与由Angular之外的外部源修改的localStorage一起工作
- Javascript hide/show 切换在 Opera 中是双向的,但在其他浏览器中只能以一种方式工作
- Packery - jquery show/hide有效,但不能以其他方式工作
- .show()和.hide()在jquery中是如何工作的
- Ng-hide逻辑不能正常工作
- Angular/Bootstrap: ng-hide不能正常工作
- JQuery .show()和.hide()不能正常工作
- Jquery show hide在大屏幕上不能正常工作.而且在移动设备上完全不起作用
- Jquery hide不能在.on()中工作
- Jquery hide()方法在平板电脑/手机上不工作
- 我的jQuery .hide()动画没有像预期的那样工作
- Jquery .hide在窗口加载时不工作
- Ng-repeat with ng-hide或在控制器中执行该工作以提高性能
- JQuery hide()和show()在ie7和ie8上不工作
- 当ng-show可以在两种情况下工作时,为什么要使用ng-hide呢?
- 第二次与ng-hide交互时,Ng-click不能工作
- Sencha Touch:Panel.hide()/show()只有在调整大小后才能工作