Question

I’ve got a HTML list,

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

In CSS I set the #wrapper to:

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

and each list item set to display: block; and the height and width properties set to match the container.

Now I’ve set the animation in jQuery as follows:

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

Now if I wanted to display a titleTile then 6 tweet messages instead of 5 I’d have to add another animation to the queue.

How could I setup the queue to accept any number of tweets (Items in the list), I’m thinking something like .forEach() and wrap that around a single queue and use the .length() method to populate a variable with the number of for each’s to do?

Answer 1

Basically I would create a function that would animate an arbitrary number of tweets. Then you can pass it whatever you needed to animate. In the following example I pass all the currently existing '.tweet_msg' elements. However, you don’t need to put the animation loop into a separate function unless you will call it multiple times from different places.

Anyway, hope this helps:

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

Forgot .dequeue() call to start animation. Was in error using closure scope to reference tweet. Also here is a jsFiddle of this working (using a fade animation instead of the one here).