Jquery, hide div, replace div, show new div?

This is my ajax success handler

success: function(data) {
  $('#contact'+finalForm[0].value).hide("drop", {direction: 'up'}, 1000,
  function(){
    $('#contact'+finalForm[0].value).replaceWith(data).show("drop", {direction: 'up'}, 1000,
    function(){
      $(document).trigger('close.facebox');
    });
  });
}

Basically what I am trying to do is

Hide the Div

When the div is hidden

Replace Contents with ajax response (response has the same id) When the content is replace

Show the new content

When the content is visible

开发者_开发技巧 close facebox

However the actual process seems to happen as

Hide the div

When the div is hidden

Remove the div

close facebox

How can I fix this?

The response contains the expected html

This is the error:

$('#contact'+finalForm[0].value).replaceWith(data)

instead of this use:

$('#contact'+finalForm[0].value).empty().append(data).show(....);