jQuery的Ajax加载内容动画？

Question

Trying out atm something with Ajax loaded Content...

Iam done so far with loading it into the div but it looks like BOOM here is it when i change it ..

So my Question is how can i animate it that its slide out the Div then it shows the Content... (this Step is easy..) but then when i click on next NavbarButton its changing the Content in the Div is changing animated or something in this way...

Here My Code so far

function getPage(id) {
 $("#output").slideToggle("slow");

var mykey = '<?php echo $_SESSION['xxxxxx']; ?>';
    $('#output').html('<center><img src="./images/icons/LoaderIcon.gif" /></center>');
    jQuery.ajax({
        url: "./ajax/engine.php",
        data:'action='+id+"&userkey="+mykey,
        type: "POST",
        success:function(data){$('#output').html(data);}
    });
}

And here the HTML

<div class="profil_posting_box">
<div  onClick="getPage('textposting');" class="profil_posting_kachel_1"></div>
<div  onClick="getPage('imageposting');" class="profil_posting_kachel_2"></div>
<div class="profil_posting_kachel_3"></div>
<div class="profil_posting_kachel_2"></div>
<div class="profil_posting_kachel_2"></div>
</div>
<div id="output"></div>

.

Answer 1

do it like this

jQuery.ajax({
    url: "./ajax/engine.php",
    data:'action='+id+"&userkey="+mykey,
    type: "POST",
    success:function(data){
     $("#output").fadeOut('slow');
     $('#output').html(data);
     $("#output").fadeIn('slow');
   }
});

you may try advanced animation techniques other than fadeIn fadeOut using jquery animate