1

我已经搜索了很长一段时间，在每个人都打我 setTimeout() 函数之前，请听我说完。

我有大约 20 个不可见的 HTML 元素。我希望它们一次可以看到一个，中间有一个暂停。我还想在让它们可见时使用一些 jQueries 很棒的动画功能。

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

我在看什么？

设置超时（）：

我一直在研究 JS 的 setTimeout 函数，据我所知，当你有 1-3 个 setTimeout() 函数时，它的效果很好。

如果你想要更多，它开始变得非常混乱。它们是嵌入的，您必须通过将数字相加来计算所有时间，而且很难获得整体情况。

jQuery.delay()

此外，jQuery.delay() 函数缺乏实际暂停代码的功能。我有 20 多个元素，没有一个我想制作动画。

更新面板垃圾邮件

我现在考虑的另一种选择（请杀了我）是使用更新面板。它每秒钟都使用计时器进行回发，并使用会话，它确切地知道它是在什么“帧”。然后它可以根据帧数设置可见/不可见，还可以触发 jQuery 动画。

现在，当我今天早上醒来时，我没想到会用这样的更新面板向我的网络服务器发送垃圾邮件......所以：

有什么好的方法可以做到这一点吗？我非常愿意接受建议。

非常感谢！:-)

4

3 回答 3

8

如果将相同的类应用于所有元素（sequential_expose在我的示例中），则可以选择这些元素并调用each()选择。要错开元素的淡入，您可以将提供的项的索引each()倍增，并将其乘以您想要的淡入之间延迟的时间，并将该值作为参数传递给delay(). 给定 500 毫秒的间隔（您可以随意设置），选择中的第一项将具有0延迟、第二项500、第三项1000等。然后您只需在调用后链接您喜欢的动画（fadeIn(200)在我的示例中）delay().

$(function () {
    $('.sequential_expose').each(function(i) {
        $(this).delay(i*500).fadeIn(200);
    });
});

请注意，该示例将其显示为文档就绪功能，您显然可以根据需要更改它。

于 2013-01-11T20:33:43.750 回答
3

这是我将如何使用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);

http://jsfiddle.net/uRwFK/

于 2013-01-11T20:27:20.383 回答
0

jQuery animate()包含一个完整的回调，允许您链接动画。

假设您有一个包含 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);
于 2013-01-11T21:02:10.493 回答