Jquery create effect after load

I have this function:

 $(".delete").live('click', function() {
  var commentContainer = $(this).parent();
        var id = $(this).attr("id");            
        var string = 'id='+ id ;    
    $.ajax({   
       url: "<?php echo site_url('messages/delete') ?>",
       type: "POST",
       data: string,
       cache: false,
       success: function(){
          commentContainer.slideUp('600', function() {$(this).remove();
             $('.messages').fadeOut('2000', function(){$(this).remove();
                $('#messages').load("<?php echo site_url('messages/show') ?>", function(){
                    $(this).slideDown('2000');
                    deleteConfirmSetup(qst); // Add function call here
                });
            }); 
        });             
    } 
  });
  return false;
});

It is working up to a load. It is loading data, but there is no slideDown - data is suddenly presented. How to fix this?

You need to modify the following line in your code. Hide the element first the next method will apply the sliding effect and make it show as well.

    $('#messages').load("<?php echo site_url('messages/show') ?>", function(){
         $(this).hide().slideDown('2000'); //modify this
         deleteConfirmSetup(qst); // Add function call here
    });