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. I have the jsfiddle setup but I still can not make it work. Any help on it will be 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>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</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

Solution

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/

you can use your console to check what is wrong