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 。