使用jquery动画检索作为ajax响应的div

Question

我有一个应用程序，其中使用ajax检索了几个div。我想在加载它们时将它们制作成动画，只需将它们从任意位置（顶部，左侧，右侧）滑动到各自的位置即可。我怎样才能做到这一点。这将返回结果的DIV是这个

while($row = mysql_fetch_assoc($agents)) 
{ 
$agntId = $row['id']; 
$agntDevices = mysql_query("SELECT * FROM devices WHERE agent_id='$agntId'"); 
$agntProfiles = mysql_query("SELECT * FROM profiles WHERE agent_id='$agntId'"); 
$noOfDevs = mysql_num_rows($agntDevices); 
$noOfPros = mysql_num_rows($agntProfiles); 
?> 
<div class="agent-tab"> 
<div class="agent-tab-header"><? echo strtoupper($row['agent_name']); ?></div> 
    <div class="agent-tab-body"> 
    <? // row starts here ?> 
    <div class="agent-tab-row"> 
     <div class="agent-tab-side-right"> 
     <div class="agent-tab-side-head agent-content"> 
     No of Profiles 
    </div> 
    <div class="agent-tab-side-value agent-content-value"> 
     <?=$noOfPros?> 
    </div> 
    </div> 
    <div class="agent-tab-side-left"> 
     <div class="agent-tab-side-head agent-content"> 
    No of Devices 
     </div> 
    <div class="agent-tab-side-value agent-content-value"> 
<?=$noOfDevs?> 
     </div> 
      </div> 
     </div> 
    <? // row ends here ?> 
      <? // row starts here ?> 
      <div class="agent-tab-row"> 
      <div class="agent-tab-side-right"> 
    <div class="agent-tab-side-head agent-content"> 
     Updated 
    </div> 
     <div class="agent-tab-side-value agent-content-value"> 
    <?=$row['updated_on']?> 
    </div> 
     </div> 
    <div class="agent-tab-side-left"> 
      <div class="agent-tab-side-head agent-content"> 
Added 
     </div> 
      <div class="agent-tab-side-value agent-content-value"> 
     <?=$row['added_on']?> 
     </div> 
     </div> 
    </div> 
     <? // row ends here ?> 
     </div> 
     </div> 
     <? } ?> 

使用检索这个和动画jQuery的IM如下。（目前它没有动画）

function LoadDashBoard() 
    { 
     var loadUrl = "ajax/load_agents.php"; 
     var ajax_load_bar = "<div align='center'><img src='images/loadingAnimation.gif' alt='loading...' /></div>"; 
     $("#actdiv").html(ajax_load_bar).load(loadUrl); 
     $(".agent-tab").animate({ 
     top: "+=250px", 
     }, 1000); 
    } 

Answer 1

你有#actdiv默认隐藏和在阿贾克斯负载使用slideDown或show('slow')都有体面的动画。