0

我想为此添加 .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 示例

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 示例

有谁知道是什么问题？在第二个示例中，它应该一个接一个地为项目设置动画，但这不会发生，它们甚至都没有动画。

4

3 回答 3

3

您的答案：

$('<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/

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

于 2012-11-18T12:36:47.943 回答
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/

于 2012-11-18T12:37:28.237 回答
1

即使这样也可以工作：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
};​
于 2012-11-18T12:45:09.297 回答