Dialog Close-Hide conflict

Dialog Close-Hide conflict


I have a dialog that I create on the fly. I want to remove it from
the DOM when it is closed, so I use a close function. This works
fine. However, I would like to add some hide animation to it. When I
do so, the hide animation and the close function seem to conflict.
The animation does not fire and an "ui-effects-wrapper" div is left in
the DOM with a z-index 3 higher. This ends up being above subsequent
dialogs, preventing them from being accessible.
Here's an example:
$("<div>Make me go away!</div>").dialog({
buttons: { "OK": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
    hide: "drop",
modal: true,
overlay: { backgroundColor: "#000", opacity: 0.5 }
});
I am using jQuery 1.3.1 and UI 1.6rc6
Thanks for any help. I really just want to clean up the dialog
element and use a hide effect at the same time. I thought about a
timeout function, but didn't really want to go that route if it wasn't
necessary.
Dave