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

我想抓取第 1 篇推特文章，添加类淡入淡出，然后在 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();
});