jqueryを使用してajaxレスポンスとして取得されたdivをアニメーション化する

Question

私はajaxを使用して2つのdivを取得するアプリを持っています。私はそれらがロードされたときにそれらをアニメーション化したいです。それはどこでも（上、左、右...）からそれぞれの位置にスライドさせるだけです。どのように私はこれを達成することができます。結果として返されますdiv要素がこれを取得し、アニメーション化するために使用してjqueryのイムは以下の通りです。この

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> 
     <? } ?> 

です。（現在はそれがアニメーション化されていない）

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は、デフォルトでは非表示に持って、 ajaxの負荷ではslideDownまたはshow('slow')の両方で適切なアニメーションが使用されます。