Javascript 使用jquery/js将html元素显示为带暂停的序列

我已经搜索了很长一段时间了，在所有人都点击setTimeout（）函数之前，请听我说完

我有大约20个不可见的HTML元素。我希望它们一次一个地变为可见，中间有一个停顿。我还想在将它们变为可见时使用一些非常棒的动画功能

所以基本上我想使用JavaScript/jQuery“播放一系列帧/事件/状态”

我看了什么？

SetTimeout（）：

我一直在研究JS setTimeout函数，据我所知，当您有1-3个setTimeout（）函数时，它工作得非常好

如果你想要更多，它开始变得非常混乱。它们是嵌入的，你必须通过把数字加在一起来计算时间，这真的很难得到整体情况

jQuery.delay（）

另外，jQuery.delay（）函数没有实际暂停代码。我有20多个元素，没有一个我想动画

Updatepanel垃圾邮件

我现在考虑的另一个选择（请杀了我）是使用updatepanel。每秒钟，它都会使用计时器和会话进行回发，它确切地知道回发的“帧”是什么。然后，它可以根据帧编号设置可见/不可见的内容，还可以启动jQuery动画

现在，当我今天早上醒来时，我没有想到用这样的更新面板向我的Web服务器发送垃圾邮件。。。。因此：

有什么好办法吗？我很乐意接受建议

---

非常感谢！：-）

以下是我将如何使用

setTimeout

进行此操作：

// Assume your target elements are all divs 
var elements = $('div');

function showOne() {
    // Fade-in the first element
    elements.first().fadeIn(200);

    // Remove first element from our jQuery object
    elements.splice(0,1);

    // If there are further elements, start a new timer
    if(elements.length) {
        setTimeout(showOne, 500);
    }
}

// Start first timeout
setTimeout(showOne, 500);

---

以下是我将如何使用

setTimeout

进行此操作：

// Assume your target elements are all divs 
var elements = $('div');

function showOne() {
    // Fade-in the first element
    elements.first().fadeIn(200);

    // Remove first element from our jQuery object
    elements.splice(0,1);

    // If there are further elements, start a new timer
    if(elements.length) {
        setTimeout(showOne, 500);
    }
}

// Start first timeout
setTimeout(showOne, 500);

---

如果将同一类应用于所有元素（

sequential\u expose

，在我的示例中），则可以选择这些元素并在选择时调用

each（）

。要错开元素的淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡。给定一个500毫秒的间隔（您可以随意设置），选择中的第一个项将

0

作为延迟，第二个

500

，第三个

1000

，等等。然后在调用

delay（）

之后，您只需链接您喜欢的动画（

fadeIn（200）

）

---

注意：该示例将其显示为document onready函数，您显然可以根据需要对此进行更改。

如果您将相同的类应用于所有元素（

sequential\u expose

，在我的示例中），您可以选择这些元素并在选择时调用

each（）

。要错开元素的淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡。给定一个500毫秒的间隔（您可以随意设置），选择中的第一个项将

0

作为延迟，第二个

500

，第三个

1000

，等等。然后在调用

delay（）

之后，您只需链接您喜欢的动画（

fadeIn（200）

）

注意：该示例将其显示为document onready函数，您可以根据需要对其进行更改。

包括一个完整的回调，允许您链接动画

假设您有一个由20个DOM元素组成的数组，下面是一个粗略的片段：

var elArray=[el1,el2,...el20];

function animateFunction(i) {
    $(elArray[i]).animate(
       ...
       // on complete move to the next element
       complete: function(){if (i<elArray.length-1) animateFunction(i+1);}
    });
}

animateFunction(0);

var-elArray=[el1，el2，…el20]；
函数动画函数（i）{
$（elArray[i]）。设置动画(
...
//完全移动到下一个元素时
complete:function（）{if（i包含一个complete回调函数，允许您链接动画

假设您有一个由20个DOM元素组成的数组，下面是一个粗略的片段：

var elArray=[el1,el2,...el20];

function animateFunction(i) {
    $(elArray[i]).animate(
       ...
       // on complete move to the next element
       complete: function(){if (i<elArray.length-1) animateFunction(i+1);}
    });
}

animateFunction(0);

var-elArray=[el1，el2，…el20]；
函数动画函数（i）{
$（elArray[i]）。设置动画(
...
//完全移动到下一个元素时
完成：函数（）{if（你是想让每个元素在它自己指定的时间出现，还是它们能在每个元素之间有一个固定的时间顺序？迈克：有固定的时间是可以的。你是想让每个元素在它自己指定的时间出现，还是它们能在每个元素之间有一个固定的时间顺序？迈克：是的在固定时间内，您可以通过使用
元素.filter（':hidden'）.first（）.fadeIn（200）
-@Blazemonger避免拼接。如果您计划稍后重用相同的jq对象，这是一个不错的选择。非常感谢您的建议，这也会完美地解决问题：-）在这种特殊情况下，您可以通过使用
元素.filter（':hidden'）.first（）.fadeIn（200）
-@Blazemonger避免拼接如果您计划稍后重用相同的jq对象，这是一个不错的选择。非常感谢您的建议，这也会完美地解决问题：-）很好！比我的jQuerier多了！：）@bfavaretto谢谢。我个人已经很累了，我的js开发越来越多地沿着这些路线进行，不再将传统的js技术与jQuery相混合，因为这是有意义的。一个问题：这会同时设置
元素。length-1
计时器吗？我不确定如何
。delay（）
已实现，拥有多个计时器似乎是OP关注的问题之一。另一方面，我的弗兰肯斯坦版本在任何给定时间都只有一个计时器运行。@bfavaretto它本质上会按照您所说的做，并且有
元素。长度-1
“计时器”从最前面开始。每个循环都会执行并启动所有元素到它们各自的延迟/动画路径。你不必管理这些计时器，所以我不知道