Pause before JQuery AJAX post

Question

Because the page I am working on is an intranet page, my AJAX call is very quick along with the response. For usability purposes I'd like a short 1-2 sec pause to display a loading animation. Below is what I have tried but the animation is barely visible.

$(document).ready(function(){ 
    $('#wait').hide();
    $('#submitform').click(function(){
    $('#wait').show();
    $.ajax({
        type: "POST",
        url: "abs_newabs_check.asp",
        data: { StaffID: $("#suggest1").val() },
        success: callback
    });

});
});

function callback(data, status)
{
    $('#wait').hide();
    $("#ajaxdiv").html(data);
}

Answer 1

I would have to suggesting thinking about a different way to add usability you are now slowing down your service to help users. What about using the Yellow Fade Technique That way you can show something has changed on the page and you are not slowing down your system.

Here is a related question that may help. Yellow fade Effect with JQuery

Answer 2

Add a setTimeout call to the callback function:

function callback(data,status) {
  setTimeout(function() {
    $("#wait").hide();
    $("#ajaxdiv").html(data);
  }, 1500);
}

nb. the data parameter will be passed into the anonymous function as a closure, if I'm not mistaken