Delayed fade on hide of a jquery dialog box

Clicking a button on my site opens a modal dialog box (that shows the word "Saving") and starts an Ajax command. When the command is finished, I want to change the text in the dialog box (to "Saved!"), wait 500 milliseconds, and have the dialog box fade out.

Opening and modifying the contents of the dialog box are no problem. I'm having trouble though with fading the dialog box after a delay. Here开发者_开发问答's the code for the dialog box:

$("#save_filters_dialog").dialog({
    autoOpen:false,
    draggable:false,
    resizable:false,
    modal:true,
    height:54,
    width:70,
    hide:"fade",
    create: function(event,ui){
        $(this).siblings(".ui-dialog-titlebar").hide();
    }
});

I also created this code to test closing the dialog (without using an Ajax command):

$("#save_filters_dialog").click(function(){
    $(this).dialog("close");
});

The fade out and closing works fine. I just can't seem to find where to put the .delay(500) that delays the fade out on close.

---

this is how I close my dialog message:

$("#save_filters_dialog").dialog(
{
 autoOpen:false,
 draggable:false,
 resizable:false,
 modal:true,
 height:54,
 width:70,
 hide: {effect: "fadeOut", duration: 1000}
}, setTimeout(function(){$("#save_filters_dialog").dialog("close");},2000));

---

Use setTimeout and an anonymous function to wrap what you want to do after it:

setTimeout(function(){ console.log('Executed after 500ms'); }, 500);

---

You could use the setTimeout() function for that.

$("#save_filters_dialog").click(function(){
    setTimeout('closeDialog('+this+')',500);
});

function closeDialog(object){
    $(object).dialog("close");
}