Javascript jquery Ajax加载动画内容？

正在尝试使用Ajax加载的内容

到目前为止，我已经完成了将其加载到div中的工作，但当我更改它时，它看起来像是BOOM

所以我的问题是，我怎样才能使其动画化，使其滑出Div，然后显示内容。。。这一步很容易。。但是当我点击next NavbarButton时，它改变了Div中的内容，也就是改变了动画或者其他类似的东西

这是到目前为止我的代码

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

这里是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>

像这样做

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

---

您可以使用

尝试除fadeIn fadeOut之外的高级动画技术。您是否需要更具体的内容？然后显示内容，然后消失并再次显示。但我希望容器不会消失。只有内容更改而不是淡出'slow'使用隐藏类似的淡出'slow'替代将被显示