淡入淡出加载CSS3动画的最佳方法
[英]Best way to fade in fade out a loading css3 animation
问题描述
I am facing problem to actually loading a fade in / out a div which has a css3 based login animation when a function loaded. 
我在实际加载淡入/淡出div时面临问题，加载一个函数时，该div具有基于css3的登录动画。 I have the jsfiddle setup but I still can not make it work. 我有jsfiddle设置，但仍然无法使它正常工作。 Any help on it will be appreciated! 任何帮助，将不胜感激！
http://jsfiddle.net/adamchenwei/v4CK6/4/ http://jsfiddle.net/adamchenwei/v4CK6/4/
HTML HTML
<!DOCTYPE html>
<body>
<div class="loading">
<div class="loading_ball_outside"><div class="loading_inside"></div></div>
</div>
<div class="section play">
<h1>PLoad CSS 2 Anywhere--FAILED</h1>
<div class="play_content">
<button class="play_button" id="1">Play1</button>
<button class="play_button" id="1">Play2</button>
<button class="play_button" id="1">Play3</button>
<button class="play_button" id="1">Play4</button>
<p>Something in Play ...</p>
<div class="play_respond" >
<table class="play_respond" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div><!--class="play_content" END-->
</div><!--class="play" END-->
</body>
</html>
CSS CSS
.loading_ball_inside {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.loading_ball_outside {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
.loading {
position: absolute;
/*left: 50%; /*the positioning you're looking for.*/
top: 50%; /* edit these values to give you*/
display: none;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
JQuery JQuery的
$(document).ready(function(){
//play_pickparentclass BEG
$(document).on('click','.play_button',function(){
loaderOn();
loaderOff();
});//play_pickparentclass END
function loaderOn(){
('.loading').fadeIn('slow');
};
function loaderOff(){
('.loading').fadeOut('slow');
};
});//$(document).ready(function() END
2 个解决方案
解决方案1
4 已采纳 2013-08-26 15:34:33
function loaderOn(){
$('.loading').fadeIn('slow');
}
function loaderOff(){
$('.loading').fadeOut('slow');
}
full code : 完整代码：
$(document).ready(function(){
function loaderOn(){
$('.loading').fadeIn('slow');
}
function loaderOff(){
$('.loading').fadeOut('slow');
}
//play_pickparentclass BEG
$(".play_button").click( function(){
loaderOn();
loaderOff();
});//play_pickparentclass END
});//$(document).ready(function() END
demo : http://jsfiddle.net/v4CK6/7/ 演示： http : //jsfiddle.net/v4CK6/7/
you can use your console to check what is wrong 您可以使用控制台检查出什么问题
解决方案2
1 2013-08-26 15:34:07
It's because you forgot to use jQuery :) 这是因为您忘记了使用jQuery :)
Try adding $ and it will work. 尝试添加$ ，它将起作用。 Like so: http://jsfiddle.net/v4CK6/6/ 像这样： http : //jsfiddle.net/v4CK6/6/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.