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

Question

我现在已经搜索了很长一段时间,在每个人都点击我的setTimeout()函数之前,请听我说.

我有~20个不可见的HTML元素.我希望它们一次变为可见,中间暂停.我还希望在将它们变为可见时使用一些jQueries非常棒的动画功能.

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

我看到了什么？

的setTimeout():

我一直在研究JS setTimeout函数,据我所知,当你有1-3个setTimeout()函数时它很有用.

如果你想要更多,它开始变得非常凌乱.它们是嵌入式的,你必须通过将数字加在一起来计算时间,而且很难得到整体情况.

jQuery.delay()

此外,jQuery.delay()函数缺乏实际暂停代码.我有20多个元素,而不是我想要动画的元素.

Updatepanel垃圾邮件

我现在正在考虑的另一种选择(拜托,杀了我),正在使用更新面板.它每秒使用一个计时器进行回发,并使用一个会话,它确切地知道它是什么"帧".然后它可以根据帧数设置可见/不可见的东西,还可以激活jQuery动画.

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

有没有什么好方法可以做到这一点？我对建议很开放.

非常感谢!:-)

Answer 1

如果将相同的类应用于所有元素(sequential_expose在我的示例中),则可以选择这些元素并调用each()选择.为了交错元素的淡入,您可以将项目的索引多次提供,each()并将其乘以您希望fadeIn之间的延迟时间并将该值作为参数传递给delay().给定500毫秒的间隔(你可以随心所欲地做到这一点),选择中的第一项将有0延迟,第二项500,第三项1000等等.然后你可以fadeIn(200)在调用之后链接你喜欢的动画(在我的例子中)delay().

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

注意,该示例将此作为文档onready函数显示,您可以根据需要显然更改它.