多个元素的排队动画

Question

我试图找出如何使用jQuery在多个元素上排队动画.

例如,我需要在屏幕上移动元素.然后,当完成后,移动下一个,等等.

这也许就是一个项目列表......一个接一个地落实到位.

有人可以帮帮我吗？

我是否需要使用每个动画的onComplete函数来启动下一个动画？

更新:简单的例子.

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>

我想让他们每个人逐一淡出.SO项目1淡入.然后当完成时,项目2淡入等等.

我正在使用jQuery将一些Flash"页面构建"类型的动画转换为HTML.所以我需要在多个元素上排队动画.就像制作一个盒子一样,并将一些文字滑到它上面......等等.

Answer 1

如果您知道效果对其他元素的持续时间,则可以为每个元素添加延迟.

假设你想一个接一个淡出一些div,每个淡入淡出需要800ms,然后,你可以立即开始第一个,第二个延迟800ms(所以当另一个结束时开始),第三个一个延迟1600毫秒等等......

您可以使用firebug或webkit控制台执行的自动化示例(喜欢您的示例构思jAndy!= D)是:

$('div.nav li').each(function(i, elem) {
    $(elem).delay(i * 800).fadeOut(800);
});

(在导航链接上执行它:问题,标签,用户......)