Why is jQuery UI dialog.('Close') firing too early?

Question

I'm trying to create a popup message in my app. On success I want to open a dialog, animate it...and then close it. I guess a better question should have been, "How do you create a timed popup in Jquery...but anyway when I run my code it appears that my dialog appears for just a split second. If I remove the dialog('close') line it works up until that point. Does jquery fire these commands in sequence or in parallel?

$.ajax({
   type: "POST",
   url: "/Sales",
   data: { customer: [id] },
   success: function(msg) {
      $('#thanks').dialog('open');
      $('#thanks').animate({ backgroundColor: '#aa0000', color: '#fff', width: 500 }, 2000); 
      $('#thanks').dialog('close');
   }
});

Answer 1

with lines the way you have it would work in almost synchronous. Try

 $('#thanks').dialog('open').animate({ backgroundColor: '#aa0000', color: '#fff', width: 500 }, 2000).dialog('close');

Answer 2

might not be waiting for the animate to finish. try adding a wait of 2000 in, or chaining the close.

Answer 3

The .dialog('close') call isn't waiting for your animation. But do you really want to close the dialog right away, or shouldn't you rather wait for user input (i.e. a link/button click) to close it?

Answer 4

You probably want to close the dialog in the callback from the animate function:

$.ajax({
   type: "POST",
   url: "/Sales",
   data: { customer: [id] },
   success: function(msg) {
      $('#thanks').dialog('open');
      $('#thanks').animate({ backgroundColor: '#aa0000', color: '#fff', width: 500 }, 2000, "linear", function(){ $('#thanks').dialog('close'); }); 
   }
});

But I think you'd be better off using a plugin, such as jGrowl?