애니메이션 항목은 동적으로

Question

이 난에 #wrapper을 설정 CSS에서

<div id="wrapper"> 
<ul id="twitter"> 
    <li id="titleTile"> 
     <a href="#" alt="Our Twitter"> 
      <span>Twitter</span> 
     </a> 
    </li> 
    <li class="tweet_msg t0"> 
     <div class="tweet_text"> 
      <a href="#"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </a> 
     </div> 
    </li> 
    <li class="tweet_msg t1"> 
     <div class="tweet_text"> 
      <a href="#"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </a> 
     </div> 
    </li> 
    <li class="tweet_msg t2"> 
     <div class="tweet_text"> 
      <a href="#"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </a> 
     </div> 
    </li> 
    <li class="tweet_msg t3"> 
     <div class="tweet_text"> 
      <a href="#"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </a> 
     </div> 
    </li> 
    <li class="tweet_msg t4"> 
     <div class="tweet_text"> 
      <a href="#"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </a> 
     </div> 
    </li>  
    <li class="tweet_msg t5"> 
     <div class="tweet_text"> 
      <a href="#"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </a> 
     </div> 
    </li>  
</ul> 
</div> 

하는 HTML 목록을 가지고 :

#wrapper { 
    overflow: hidden; 
    width: 330px; 
    height: 160px; 
    background: black; 
    position: absolute; 
    border: 1px transparent solid; 
    top: 0; 
    left: 0; 
} 

각 목록 항목은 display: block;과 height로 설정 컨테이너와 일치하도록 속성이 설정된 width 다음과 같이

지금 내가 jQuery를에 애니메이션을 설정 한 :

function tileShuffle() { 
     $('#twitter') 
      .queue('myQueue',function(next){ 
       $('#titleTile').animate({top: 160}, 
           {duration: 300, 
           queue: false, 
           complete: next 
           }) 
      }) 
      .queue('myQueue',function(next){ 
       $('.tweet_msg.t0').animate({top: 0, height: "show"}, 
           {duration:300, 
           queue:false, 
           complete: next}) 
      }).delay(10000000000,'myQueue')    
      .queue('myQueue',function(next){ 
       $('.tweet_msg.t1').animate({top: 0, height: "show"}, 
           {duration:300, 
            queue:false, 
            complete: next}) 
      }).delay(10000000000,'myQueue')      
      .queue('myQueue',function(next){ 
       $('.tweet_msg.t2').animate({top: 0, height: "show"}, 
           {duration:300, 
            queue:false, 
            complete: next}) 
      }).delay(10000000000,'myQueue')      
      .queue('myQueue',function(next){ 
       $('.tweet_msg.t3').animate({top: 0, height: "show"}, 
           {duration:300, 
            queue:false, 
            complete: next}) 
      }).delay(10000000000,'myQueue')     
      .queue('myQueue',function(next){ 
       $('.tweet_msg.t4').animate({top: 0, height: "show"}, 
           {duration:300, 
            queue:false, 
            complete: next}) 
      }).delay(10000000000,'myQueue')     
      .queue('myQueue',function(next){ 
       $('#titleTile').animate({top: 0}, 
           {duration:300, 
            queue:false, 
            complete: next})  
            $(".tweet_msg").hide();  
            $(".tweet_msg").css('top','-160px') 
      }).delay(10000000000,'myQueue')     
      .dequeue('myQueue') 
}; 

을 지금은 그때 큐에 다른 애니메이션을 추가해야 할 것 6 트윗 메시지 대신 5 titleTile을 표시하고 싶어합니다. 내가 설정 큐가 트윗 (목록의 항목), 내가 .forEach() 같은 것을 생각하고 임의의 수를 수용하고 단일 queue 주위에 그리고하는 수와 변수를 채울 .length() 방법을 사용하는 것이 마무리 할 수있는 방법을

각자 할 일이 있니?

Answer 1

기본적으로 나는 임의의 수의 트윗을 애니메이트 할 수있는 함수를 만들 것이다. 그런 다음 애니메이션에 필요한 모든 것을 전달할 수 있습니다. 다음 예제에서는 현재 존재하는 모든 '.tweet_msg' 요소를 전달합니다. 그러나 애니메이션 루프를 다른 위치에서 여러 번 호출하지 않는 한 별도의 함수로 루프를 넣지 않아도됩니다. 어쨌든

이 도움이 되었으면 좋겠 :

function tileShuffle() { 
    //initial animations for title 
    $('#twitter').queue('myQueue', function (next) { 
     $('#titleTile').animate(
       { 
        top: 160 
       }, 
       { 
        duration: 300, 
        queue: false, 
        complete: next 
       } 
      ); 
    }); 

    //send off all the existing elements matching '.tweet_msg' 
    //to our animation function 
    queueTweetAnims($('#twitter > li.tweet_msg')); 

    //start the queued animations 
    $('#twitter').dequeue('myQueue'); 
} 

function queueTweetAnims($tweets) { 
    $('#twitter').data('child', 0); 
    //loop through all the tweets 
    $tweets.each(function() { 
     //for each tweet we will queue its animation. 
     $('#twitter').queue('myQueue', function (next) { 
      var $this = $(this), 
       indx = $this.data('child'); 
       $tweet = $this.children('li.tweet_msg').eq(indx); 

      $this.data('child', ++indx); 
      $tweet.animate(
         { 
          top: 0, height: 'show' 
         }, 
         { 
          duration: 300, 
          queue: false, 
          complete: next 
         } 
        ); 
     }).delay(1E10, 'myQueue'); 
    }); 
} 

편집

애니메이션을 시작 .dequeue() 전화를 잊어 버렸습니다. 트윗을 참조하기 위해 폐쇄 범위를 사용하는 중에 오류가 발생했습니다. 또한 여기에이 작업의 jsFiddle이 있습니다 (여기에 페이드 애니메이션 사용).