Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated!
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