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>

我想抓住第一篇Twitter文章，添加课程淡出，然后在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");
    });
});

已更新，以满足您的特定淡入淡出和课程要求。

无限淡出/淡化版本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();
});