Question

I am trying to create a loading image when user clicks submit button. For some weird reason, it seems that the hide event gets executed simultaneously with the show event (I cannot see the loading image at all. I tried adding delay to hide but didn’t work) If I remove the hide event, however, the loading image shows up just fine. Any ideas? Thank you so much for helping me.

$('#submitButton').click(function() {
    $("#loading-popup").ajaxStart(function() {
        $(this).show();
    }); //show loading image
    //.....................
    $.ajax({
        type: 'POST',
        dataType: "json",
        //.....................
        success: function(jsonData) {
            //.....................
            $("#loading-popup").delay(15000).hide(); //hide loading image
            //.....................
        },

    });
});

Answer 1

.hide() without any parameter is a synchronous action similar to .css('display', 'none'). It is not an animation hence doesn’t obey animation delays.

A simple solution is to simply pass 0 as the duration, so it triggers the animation version of .hide() which obeys the delay:

​$('#foo').​​​​delay(2000).hide(0);​

Fiddle

Note that passing 0 as duration is buggy in some versions of jQuery so upgrade to 1.8.2 or the latest stable release of your version if you find issues. You can also use a setTimeout if you need a delay, even though that’d be just extra clutter.