jQuery loop, add and remove class

Question

Hi I have a function called after setTimeout, the function is as follows

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

            }

    }

This is my layout

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

I wan to grab the 1st twitter article, add the class fade, then after 2 seconds, slide it up.

After this i want to move the fade class to the bottom, remove the class and re-apply the class to the next in line twitter article.

Essentially looping through all 10

The commented out code is the part that is working for me

Thanks for the help

Answer 1

Use async recursion: 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");
    });
});

Updated to do your specific fade and class requirements.

Infinite fadeout/fadein version 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();
});