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);
}

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);
}

• javascript
• jquery

Share Improve this question Follow asked Jan 15, 2010 at 8:41 tonyyebtonyyeb 71955 gold badges1313 silver badges3232 bronze badges 1

• 2 "I want to make my application slower", what an interesting idea :-) – naivists Commented Jan 15, 2010 at 9:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

Use setTimeout function

setTimeout("alert('5 seconds has passed.');",5000);