Question

我想将.delay（）添加到此，因此每个项目将一个接一个地动画。问题是，如果我向元素添加delay（），fadeIn就会停止工作。

工作代码（但没有延迟......）

time = 500;

for (var i=1;i<=5;i++){

    delay2 = (i * time);
    $('<tr><td><h3>Hello</h3></td><td>'+i+'</td</tr>').hide().appendTo('#table').fadeIn("slow").css('display', 'table-row');

    // do more stuff here

};

jsfiddle example

FadeIn无法正常工作（因为它有延迟......）

time = 500;

for (var i=1;i<=5;i++){

    delay2 = (i * time);
    $('<tr><td><h3>Hello</h3></td><td>'+i+'</td</tr>').hide().appendTo('#table').delay(delay2).fadeIn("slow").css('display', 'table-row');

    // do more stuff here

};

jsfiddle example

有谁知道这是什么问题？在第二个例子中，它应该一个接一个地对项目进行动画制作，但这不会发生，它们甚至不会被动画化。

Answer 1

你的回答：

$('<tr><td><h3>Hello</h3></td><td>'+i+'</td</tr>')
.hide()
.appendTo('#table')
.delay(delay2)
.fadeIn("slow")
.queue(function() { $(this).css('display', 'table-row'); });

解释很简单：当您链接队列中的事件和未进入队列的事件时，未进入队列的事件将绕过它。 $ .css（）不会进入fx队列，因此会立即执行。

解决方法是使用$ .queue（）函数将不可队列的调用排入fx队列。

工作小提琴：http://jsfiddle.net/u5dEp/6/

（在一个答案中有很多队列）

Answer 2

试试这个：

$('<tr><td><h3>Hello</h3></td><td>'+i+'</td</tr>')
.appendTo('#table')
.hide()
.delay(delay2)
.show('slow');

这里的问题是css变化立即发生，而你希望它在淡入完成后发生。您在此处根本不需要fadeIn，特别是因为show会记住display属性值并自动恢复。

这是一个小提琴：http://jsfiddle.net/u5dEp/7/

Answer 3

即使这样也可以：http://jsfiddle.net/pYYFM/8/

time = 500;

for (var i=1;i<=5;i++){

delay2 = (i * time);
    $('<tr><td><h3>Hello</h3></td><td>'+i+'</td></tr>').hide().appendTo('#table').delay(delay2).fadeIn("slow").queue();
                                               ^-------missed this
};

FondIn在循环延迟时停止工作

3 个答案: