JQuery Show doesn't work if css class has a mapping: none

Question

I have a class called boot:

.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 the following html snippet:

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

and my jQuery code (from the finished document):

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

But show() doesn't work at all. Even if I run it from a Chrome window. In the Chrome developer window, if I uncheck the display: none box from the download class, a tag will appear.

What's happening?

Answer 1

I just got it!

I will fix this by running this on my jQuery:

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

Hope helps someone else :)

Answer 2

Try the following:

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

you can remove the setTimeout function in beforesend,

here is the jsfiddle working link, I replaced the background image with the background color: " JsFiddle "

Answer 3

Use $("#loading").show(); instead $("#loading").show().children().show();

You are trying to execute this on a local instance, although it is very fast, so you won’t be able to view the loading .

To test the same thing, you simply unload the load hiding line from your code, and you can try, now you can find the downloadable text.

  complete: function () { // $("#loading").hide(); } 

Answer 4

Your code does not work because you are mixing classes with identifiers. In your css you have .loading , which is a class, but in your jQuery you use the id $("#loading") selector $("#loading") . Your jQuery just can't find the element.

Answer 5

Actually, I myself ran into this problem, and there is a much simpler solution. Just remove the class.

 $('#loading').removeClass('loading');