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.
精彩评论