jquery延迟似乎不会使后续命令执行

Question

我有以下jquery代码：

$j('#' + messageId).fadeTo(1000, .3).delay(3000).css("top", 20);

我的期望是，当这次运行时会发生以下情况：

1. messageId div超过一秒，低至.3不透明度
2. 3秒内没有任何事情发生
3. messageId div从顶部移动到20像素

相反，没有延迟。只有上面的步骤1和3以相反的顺序发生，或换句话说：

1. messageId div立即移动
2. 移动后，消息会消失一秒钟

注意：我真正想要做的最后一步是remove()调用，以便将元素从DOM中取出，但这似乎也很快“解雇”，所以我想我会尝试设置此CSS位置。

延迟是否只会延迟后续效果，而不会延迟后续的css设置或remove()来电？我必须使用javascript setTimeout()函数来实现我的目标吗？

Answer 1

将队列用于非标准效果。

$j('#' + messageId).fadeTo(1000, .3).delay(3000).queue(function(){ 
   $(this).css("top", 20);
}); 

这里是fiddle。

Answer 2

我相信delay()函数仅适用于jQuery的动画队列。 css函数不是动画队列的一部分。您应该在超时时进行回调。例如：

$j('#' + messageId).fadeTo(1000, .3, function() {
    setTimeout(function() {
        $('#' + messageId).css("top", 20);
    }, 3000);
}