Jquery 动画帮助

Question

我正在尝试使用 Jquery 创建连锁反应。通过让一个元素一个接一个地“弹跳”。我可以使用它，但不确定为什么它只能以这种方式工作。首先是代码。

//First Part (I Don't know why I need it?)
$(elements).queue(function(){
   $(this).fadeTo("fast",1);
   $(this).dequeue();});

//The Actuall Ripple Effect             
for (var i = 0; i < elements.length; i++)                       
    $(elements[i]).effect("bounce",{times:1}).delay(i * 50);
                }

如果我删除第一部分，所有元素都会同时弹起。所以我的问题是为什么会发生这种情况，他们有解决办法吗？

我正在使用 Jquery 1.4.2 “元素”是内联无序列表中的图像

//edit 我忘了声明弹跳效果来自 Jquery UI。

Answer 1

您只是将 .delay() 放在了效果的错误一侧。

尝试一下： http://jsfiddle.net/MF3A8/ （单击顶部的“运行”按钮重播）

elements = $('div');

for (var i = 0; i < elements.length; i++) {                   
    elements.eq(i).delay(50 * i).effect("bounce",{times:1});
}​

并且您可以使用 .eq() 引用 jQuery 对象中的正确元素。

• http://api.jquery.com/eq/

Answer 2

尝试：

jQueryElement.animate({bogusAttribute: false}, 400).animateMethod();

其中 400 是延迟的持续时间（以毫秒为单位）。 bogusAttribute 可以是 CSS 规范中没有的任何内容，属性值也可以是任何内容，基本原理是让元素忙碌而不真正设置动画。

element.delay() 暂停排队效果 — 它“[设置]一个计时器来延迟队列中后续项目的执行”，因此element.firstAnimationMethod(/*arguments*/).delay(400).secondAnimationMethod(/ * 参数 */) 有效。

那将是：

$(elements).each(function(index, elementToAnimate) {

    $(this).animate({bogus: false}, (index * 50)).effect("bounce", {times: 1});

});