2012-06-06 6 views
0

시세 효과를 사용하여 다른 페이지에서로드 된 데이터에 애니메이션을 적용하려고합니다.아약스로로드 된 데이터에 애니메이션 적용

온라인에서 찾은 한 가지 예를 통해이 작업을 처리했습니다.

여기 내 문제는 내 에이 잭스가로드 된 경우에만이 효과를 적용하고 싶습니다.

그래서 나는 아약스 .when 내부 코드와 .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

난 당신이 아약스의 성공 콜백 함수 내부에 "애니메이션"코드를 삽입해야 할 것 같아요.

success : function (data) { [animationcodehere] } 
관련 문제