jquery Ajax加载内容动画?

时间:2015-07-15 07:11:45

标签: javascript jquery html css ajax

尝试使用Ajax加载的内容...

到目前为止,我把它加载到了div中,但是当我改变它时它看起来就像BOOM一样..

所以我的问题是我如何设置动画,它滑出Div然后它显示内容......(这一步很简单..)但是当我点击下一个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>

1 个答案:

答案 0 :(得分:0)

这样做

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

您可以使用jquery animate

尝试fadeIn fadeOut以外的高级动画技术