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() suspends queued effects — 它“[设置]一个计时器来延迟队列中后续项的执行”，所以element.firstAnimationMethod(/* arguments */).delay(400).secondAnimationMethod(/* arguments */) 有效。

那就是：

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

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

});