задержка JQuery, кажется, не держать последующее выполнение команды

Question

У меня есть следующий код JQuery:

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

Я ожидаю, что следующий будет, когда это RAN:

1. MESSAGEID ДИВ исчезает в течение одной секунды, до .3 непрозрачность
2. Ничего не происходит в течение 3 секунд
3. СообщениеId div перемещается на 20 пикселей сверху

Вместо этого нет никакой задержки. Только шаги 1 и 3 выше произойдет, в обратном порядке, или, другими словами:

1. The MessageId div немедленно перемещает
2. После перемещения, сообщение исчезает за одну секунду

Примечание: то, что я действительно хочу сделать для последнего шага вызов remove(), чтобы получить элемент из DOM, но это тоже показалось «слишком быстро», поэтому я решил попробовать эту позицию css.

Задержка только задерживает последующие эффекты, а не последующую настройку css или вызов remove()? Должен ли я использовать функцию javascript setTimeout() для достижения моей цели?

Answer 1

Я считаю, что функция delay() работает только в очереди анимации jQuery. Функция css не является частью очереди анимации. Вы должны сделать обратный вызов с таймаутом. Например:

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

Answer 2

Использовать очередь для нестандартных эффектов.

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

Вот fiddle.