我实际上在加载函数时加载淡入/淡出具有基于css3的登录动画的div的问题。我有jsfiddle设置但我仍然无法使其工作。任何帮助将不胜感激!
http://jsfiddle.net/adamchenwei/v4CK6/4/
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
.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的
$(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
答案 0 :(得分:4)
function loaderOn(){
$('.loading').fadeIn('slow');
}
function loaderOff(){
$('.loading').fadeOut('slow');
}
完整代码:
$(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
演示:http://jsfiddle.net/v4CK6/7/
您可以使用控制台检查错误
答案 1 :(得分:1)
这是因为你忘了使用jQuery:)
尝试添加$
,它会起作用。像这样:http://jsfiddle.net/v4CK6/6/