Question

我有一个HTML列表，

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

在CSS中我将#wrapper设置为：

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

现在，如果我想显示一个titleTile，那么6条推文消息而不是5条消息我必须在队列中添加另一个动画。

我如何设置队列以接受任意数量的推文（列表中的项目），我正在考虑类似.forEach()的内容并将其包裹在一个queue周围并使用{{1使用每个要执行的数量填充变量的方法？

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这个工作（使用淡入淡出动画而不是这里的动画）。

动态地为列表中的项目添加动画

1 个答案: