2012-06-06 120 views
0

我想要動畫從另一個頁面加載的數據(帶有滾動條效果)。使用ajax動畫加載的數據

我設法做到這一點與我在網上找到的一個例子。

我的問題在於,我想讓這個效果只在我的ajax加載時才起作用。

所以,我想通過它把我裏面.when Ajax代碼和.done

的股票的效果,但它並沒有這樣的工作。

我還能試試嗎?

$(document).ready(function() { 
     $(function CheckinMap() { 
      $.when($.ajax({ 
       type: "GET", 
       url: "default.cs.asp?Process=ViewCheckins", 
       success: function(data) { 
       $(".newsfeed").append(data); 
       }, 
       error: function(data) { 
       $(".newsfeed").append(data); 
       } 
      })).done(); 
     }); 
}); 


     var delay = 2000; // you can change it 
     var count = 5; // How much items to animate 
     var showing = 3; //How much items to show at a time 
     var i = 0; 
      function move(i) { 
       return function() { 
        $('#feed'+i).remove().css('display', 'none').prependTo('.newsfeed'); 
        } 
      } 
      function shift() { 
       var toShow = (i + showing) % count; 
       $('#feed'+toShow).slideDown(1000, move(i)); 
       $('#feed'+i).slideUp(1000, move(i)); 
       i = (i + 1) % count; 
       setTimeout('shift()', delay); 
      }  
     $(document).ready(function() { 
      setTimeout('shift()', delay); 
     }); 

外部數據

     <div class="metadata" id="feed0"> 
          <div class="userinfo"> 
           <span><strong>&nbsp;</strong> @ Amphi I @ NY</span> 
           <span></span> 
           <span>-5276 seconds ago</span> 
          </div> 
          <div class="commonfriends">        
          </div>         
          <div class="tools">        
          </div> 
         </div> 

         <div class="metadata" id="feed1"> 
          <div class="userinfo"> 
           <span><strong>&nbsp;</strong> @ Flaming Buddha House</span> 
           <span></span> 
           <span>18 hours ago</span> 
          </div> 
          <div class="commonfriends">        
          </div>         
          <div class="tools">        
          </div> 
         </div> 

         <div class="metadata" id="feed2"> 
          <div class="userinfo"> 
           <span><strong>&nbsp;</strong> @ Bar @ NY</span> 
           <span></span> 
           <span>19 hours ago</span> 
          </div> 
          <div class="commonfriends">        
          </div>         
          <div class="tools">        
          </div> 
         </div> 

         <div class="metadata" id="feed3"> 
          <div class="userinfo"> 
           <span><strong>&nbsp;</strong> @ Gym @ NY</span> 
           <span></span> 
           <span>8 hours ago</span> 
          </div> 
          <div class="commonfriends">        
          </div>         
          <div class="tools">        
          </div> 
         </div> 

         <div class="metadata" id="feed4"> 
          <div class="userinfo"> 
           <span><strong>&nbsp;</strong> @ Bar @ NY</span> 
           <span></span> 
           <span>yesterday</span> 
          </div> 
          <div class="commonfriends">        
          </div>         
          <div class="tools">        
          </div> 
         </div> 

         <div class="metadata" id="feed5"> 
          <div class="userinfo"> 
           <span><strong>&nbsp;</strong> @ NY</span> 
           <span></span> 
           <span>yesterday</span> 
          </div> 
          <div class="commonfriends">        
          </div>         
          <div class="tools">        
          </div> 
         </div> 

回答

0

我猜你需要把你的「動畫」代碼AJAX的成功回調函數內。

success : function (data) { [animationcodehere] }