使用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')都有體面的動畫。