jquery/javascript：用不同的ID标记逐个循环动画函数？

嗨，我有一个函数，我想循环使用不同的ID标签每次。单击导航链接时调用此函数。到目前为止，我有这个，我想改变txt1到txt2，然后TXT3，直到txt5，这样一个接一个地播放每个动画。谢谢

function animetxt(){
$o=$("#txt1");
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}

函数animetxt（）{
$o=$（“#txt1”）；
$o.html（$o.text（）.replace（/（[\S]）/g，$1'）；
$o.css（'display'，'inline-block'）；
$（'span'，$o）.stop（）.css（{位置：'relative'，
显示：'inline-block'，
不透明度：0，
尺寸：84，
顶部：函数（i）{return Math.floor（Math.random（）*500）*（（i%2）？1:-1）；}，
左：函数（i）{return Math.floor（Math.random（）*500）*（（i%2）？1:-1）；}
}).animate（{opacity:1，fontSize:20，top:0，left:0}，1000）；}

更有效的方法是按类名获取元素，而不是通过数字循环获取ID

HTML:

Javascript

函数animetxt（）{
$（'span.txt el'）。每个（函数（索引，元素）{
/*
索引：由$（'span.txt el'给出的结果中当前项的索引
元素：DOM元素
*/
$o=$（元素）；//您也可以使用$（this）
//这里有神奇的东西
});
}

我将创建一个包含所有ID的数组，并使用

$对其进行迭代。每个
：

$.each(['txt1', 'txt2' ], function(index, value) { 
  animetxt(value);  
});

（请注意，您可以键入ID或使用任何选择器）

以下是函数：

function animetxt(id) {
    $o = $('#txt' + id);
    if (!$o.length) return;

    $o.html($o.text().replace(/([\S])/g, '<span>$1</span>'));
    $o.css('display', 'inline-block');
    $('span', $o).stop().css({
        position: 'relative',
        display: 'inline-block',
        opacity: 0,
        fontSize: 84,
        top: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        },
        left: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        }
    }).animate({
        opacity: 1,
        fontSize: 20,
        top: 0,
        left: 0
    }, {
        complete: function() {
            id++;
            animetxt(id);
        }
    }, 1000);
}​

函数animetxt（id）{
$o=$（“#txt”+id）；
如果（！$o.length）返回；
$o.html（$o.text（）.replace（/（[\S]）/g，$1'）；
$o.css（'display'，'inline block'）；
$（'span'，$o）.stop（）.css({
位置：'相对'，
显示：“内联块”，
不透明度：0，
尺寸：84，
顶部：功能（一）{
返回数学楼层（数学随机（）*500）*（（i%2）？1:-1）；
},
左：功能（一）{
返回数学楼层（数学随机（）*500）*（（i%2）？1:-1）；
}
}).制作动画({
不透明度：1，
尺寸：20，
排名：0，
左：0
}, {
完成：函数（）{
id++；
animetxt（id）；
}
}, 1000);
}​

试试看：

函数animetxt（$el）{
如果（！$el）
$o=$（“#txt1”）；
否则{
$o=$el.next（）；
如果（$o.length==0）
return；//如果没有更多项，则停止
}
$o.html（$o.text（）.replace（/（[\S]）/g，$1'）；
$o.css（'display'，'inline-block'）；
$（'span'，$o）.stop（）.css（{位置：'relative'，
显示：'inline-block'，
不透明度：0，
尺寸：84，
顶部：函数（i）{return Math.floor（Math.random（）*500）*（（i%2）？1:-1）；}，
左：函数（i）{return Math.floor（Math.random（）*500）*（（i%2）？1:-1）；}
}).animate（{opacity:1，fontSize:20，top:0，left:0}，1000，函数（el）{animetxt（$（this））；}）；

您可以执行上面的操作。
function（el）{animetxt（$（this））；}
是的完整处理程序。它在动画完成时被调用。您只需要找到下一个应该设置动画的元素。在我的示例中，我使用的是
.next（）
假设
txt1
、
txt2
、
txt3
等都是兄弟元素。如果所有元素都已设置动画，则停止动画。您可能需要找到其他方法来获取下一个元素-这取决于HTML的结构。
函数参数中的索引和元素是什么？我猜它们是jQuery的参数值（由foreach提供）。我想我不需要在$each@Aaron因为我使用类名来获取元素，所以您（可以）有多个元素，这样就可以得到一个数组。匿名函数将对该数组中的每个元素运行。
索引
对应于数组的索引，
元素
对应于它的值。但是，
此
也对应于该元素。在这种情况下，将同时为所有元素播放动画，不会t一个接一个。我如何调整它以使它一个接一个地播放？@Aaron你可以利用动画回调函数，或者在你调用
animetxt
@Aaron后，快速破解可能会增加1000的延迟。我已经修改了我的答案，以便一个接一个地为对象制作动画。它现在只为txt1 id制作动画我得到了在javascript控制台上：uncaughttypeerror:Object txt1没有方法“next”你的代码是什么样子的？你是否传递这样的元素：
function（el）{animetxt（$（this））；}
？重要的是
这个
用jQuery对象包装：
$（this）
。需要查看您的代码以判断错误所在。但如果您使用的是jQuery对象，则“下一步”应该可以工作。错误表明您正在尝试调用非jQuery对象的.next（）
 $(function() {
      animetxt(1);
    });

function animetxt(id) {
    $o = $('#txt' + id);
    if (!$o.length) return;

    $o.html($o.text().replace(/([\S])/g, '<span>$1</span>'));
    $o.css('display', 'inline-block');
    $('span', $o).stop().css({
        position: 'relative',
        display: 'inline-block',
        opacity: 0,
        fontSize: 84,
        top: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        },
        left: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        }
    }).animate({
        opacity: 1,
        fontSize: 20,
        top: 0,
        left: 0
    }, {
        complete: function() {
            id++;
            animetxt(id);
        }
    }, 1000);
}​

function animetxt($el){    
    if(!$el)
        $o=$("#txt1");
    else {
        $o = $el.next();
        if($o.length == 0)
           return; //stop if no more items
    }
    $o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
    $o.css('display','inline-block');
    $('span',$o).stop().css({position:'relative',
                            display:'inline-block',
                            opacity:0,
                            fontSize:84,
                            top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                            left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                            }).animate({opacity:1,fontSize:20,top:0,left:0},1000, function(el) { animetxt($(this)); });