Hiding div while making ajax call with JQuery for a smooth experience

in response to http://stackoverflow.com/questions/27513115/hiding-div-while-making-ajax-call-with-jquery-for-a-smooth-experience/27513180#27513180

HTML

<script src="http://momentjs.com/downloads/moment.js"></script>
<div id="check">Check</div>
<div hidden id="loading">LOADING</div>
<button id="get">Get</button>

CSS

#CHECK
 {
    background-color:red;
}

JavaScript

var https = 'https://www.googleapis.com/calendar/v3/calendars/';
function HideCheckShowLoading() {
    $("#check").hide('slow',function () {
        $("#loading").show('slow');
    });
};
function HideLoadingShowCheck() {
    $("#loading").hide('slow',function () {
        $("#check").show('slow');
    });
};
$(document).ready(function() {
    $('#get').click(function() {
        $.when(HideCheckShowLoading()
       ,$.ajax({
           url: https,
           dataType: 'jsonp',
           type: "GET",
           success: function (response) {
               //do something
           },
           error: function() {
               //do something else                
           }
       }) 
        ).done(HideLoadingShowCheck());
    });
});