アニメイト項目を動的

Question

、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> 

私は#wrapperを設定します。

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

とdisplay: block;とheightに設定された各リスト項目コンテナと一致するようにプロパティが設定されています。次のように

は今、私はjQueryのアニメーションを設定している：私は代わりに5その後、6つのつぶやきメッセージをtitleTileを表示したい場合

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') 
}; 

は今、私はキューに別のアニメーションを追加する必要があると思います。

どのように私はセットアップキュー、私は.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'); 
    }); 
} 

EDIT

は、アニメーションを開始する.dequeue()コールを忘れました。クロージャスコープを使ってツイートを参照するのは間違っていました。また、ここには、この作業のjsFiddleがあります（ここではフェードアニメーションを使用しています）。