Jquery create effect after load

Question

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?

Answer 1

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
    });