You're specifying "async: false" which will appear to make the browser appear frozen because it's performing a
synchronous AJAX request instead of the default asynchronous call. Have you read the jQuery AJAX documentation (
http://api.jquery.com/jQuery.ajax/) in detail? Specifically, the note below regarding the 'async' property:
Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
In my experience, animations either never or only rarely work well when you're using synchronous requests.
I don't know why you even need or want to use a synchronous AJAX call in this case when you're using a success callback in your AJAX request. By using the success/error callbacks you should still be able to get the same behavior as a synchronous request if implemented correctly. If not, then you haven't implemented your AJAX request handling and callbacks correctly.
As an additional note, your logic to hide the loading message should be
performed in the always callback, not in the success/done callbacks. With your current jsfiidle, the loading message will not be hidden in the event of an
error calling your server-side resources.
While it shouldn't effect the behavior immediately, you should also be using the appropriate AJAX callback handlers for jQuery 1.8:
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
In addition, you should also read the jQuery Mobile API documentation at
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html$.mobile.showPageLoadingMsg() (method)-
Deprecated in 1.2 - use $.mobile.loading( 'show' ) instead, see examples above
$.mobile.hidePageLoadingMsg() (method)-
Deprecated in 1.2 - use $.mobile.loading( 'hide' ) instead, see examples above
