开发者

animating a div retrieved as an ajax response using jquery

开发者 https://www.devze.com 2023-03-08 15:31 出处:网络
I have an app in which a couple of divs are retrieved using ajax. I want to animate them when they are loaded that is just slide them from anywhere (top,left,right...) to their respective position. Ho

I have an app in which a couple of divs are retrieved using ajax. I want to animate them when they are loaded that is just slide them from anywhere (top,left,right...) to their respective position. How can i achieve this. The div which will be returned as result is this

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 Profi开发者_如何转开发les
     </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>
        <? } ?>

The jquery i m using to retrieve this and animate is below.(currently it is not animating)

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


Have you #actdiv hidden by default and on ajax load use slideDown or show('slow') both have decent animations.

0

精彩评论

暂无评论...
验证码 换一张
取 消