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在下面。（目前它不是动画）

  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')的ajax加载时，两者都有不错的动画。

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

1 个答案: