jQuery Show not working if css class has display:none

Question

I have a class called loading like this:

.loading {
   display: none;
   vertical-align: top; 
   margin: 0; 
   padding: 0; 
   background: url('../images/shared/loading_16x16.gif') center center no-repeat; 
   width: 16px; 
   height: 16px;
}

with following html snippet:

<div id="loading" class="loading"></div>

and my jQuery code (on document ready):

$.ajaxSetup({
    beforeSend: function () {
        $("#loading").show().children().show();
    },
    complete: function () {
        $("#loading").hide().children().hide();
    }
});

But show() is not working at all. Even if I trigger it from the chrome developer window. On the chrome developer window if I uncheck the display: none from the loading class then the tag appears.

What's happening?

Answer 1

I just figured out!

I fix it by doing this on my jQuery:

$.ajaxSetup({
     beforeSend: function () {
         $("#loading.loading").show();
     },
     complete: function () {
         $("#loading.loading").hide();
     }
});

Hope helps to some else :)