jQuery循环，添加和删除类

Question

嗨，我有一个叫setTimeout的函数，函数如下

function slideuptwitter(){

    for (var i = 0, limit = 10; i < limit; i++) {
            $('.twitter-article').first().addClass('fade');
            $('.fade').delay( 2000 ).slideUp(5000);
            //$('.fade').appendTo('#twitter-feed');

            //$('.fade').delay( 5000 ).removeClass('fade');

            }

    }

这是我的版面

<div id="twitter-feed">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
</div>

我想抓住第一篇推特文章，添加类淡出，然后在2秒后，滑动它。

在此之后，我想将淡出类移到底部，删除类并将类重新应用到twitter文章中的下一个。

从本质上讲贯穿了所有的10个

注释掉的代码是为我工作的部分。

谢谢你的帮助

Answer 1

使用异步递归：http://jsfiddle.net/7TQCr/2/

function fadeOut(elements, callback)
{
    if (elements.length){
        elements.eq(0).addClass('fade');
        elements.eq(0).delay( 2000 ).slideUp(1000, function(){
            elements.eq(0).removeClass('fade');
            fadeOut(elements.slice(1), callback);
        });
    }
    else {
        callback();
    }
}
$(function(){
    fadeOut($('#twitter-feed div'), function(){
        alert("done");
    });
});

更新以执行特定的淡入和类要求。

无限fadeout/fadein版本http://jsfiddle.net/7TQCr/4/

function fadeOut(elements, callback)
{
    if (elements.length){
        elements.eq(0).addClass('fade');
        elements.eq(0).delay( 2000 ).slideUp(1000, function(){
            elements.eq(0).removeClass('fade');
            fadeOut(elements.slice(1), callback);
        });
    }
    else {
        callback();
    }
}
function fadeIn(elements, callback)
{
    if (elements.length){
        elements.eq(0).addClass('fade');
        elements.eq(0).delay( 2000 ).slideDown(1000, function(){
            elements.eq(0).removeClass('fade');
            fadeIn(elements.slice(1), callback);
        });
    }
    else {
        callback();
    }
}
function infinite(){
    fadeOut($('#twitter-feed div'), function(){ 
        fadeIn($('#twitter-feed div'), function(){
            infinite();
        });
    });
}
$(function(){
    infinite();
});