В общем смысле код jQuery выполняется в том порядке, в котором он появляется, так же, как и для любого другого кода JavaScript. Однако функции, использующие setTimeout() или Ajax, могут выполнить что-то после задержки.
В случае кода из вашего вопроса вы используете .delay() метод , который добавляет задержку только к jQuery анимация эффекты , и метод .css() не участвует в анимации. Таким образом, как указано в комментарии Феликса, два изменения CSS происходят сразу после друг друга, слишком быстро, чтобы увидеть первый цвет.
Точнее говоря, происходит ваш первый вызов .css(), затем происходит вызов .delay(), но он добавляет задержку в очередь анимации, а затем немедленно возвращается, а затем происходит ваш второй вызов .css(). Если вы поставите в очередь другие анимационные эффекты, они появятся после задержки. Браузеры запускают JavaScript в одном потоке, поэтому у вас никогда не будет двух блоков кода, выполняющихся одновременно, и обратите внимание, что этот единственный поток также используется браузером для рендеринга (именно поэтому длительные циклы делают браузер не отвечает).
Итак, вы, естественно, можете спросить, не существует ли способа изменить настройки css таким образом, чтобы он участвовал в процессе анимации jQuery? Да, вы можете использовать метод .animate() - за исключением того, что он не работает с цветами. По крайней мере, не по умолчанию. Но если вы включите расширение jQuery UI в jQuery , тогда вы можете использовать .animate() для изменения цвета следующим образом:
$(document).ready(function() {
$(".post").animate({
"color": "#0000FF"
}, 0).delay(800).animate({
"color": "##FF0000"
}, 0);
});
Демо: http://jsfiddle.net/jZUzP/1/
Обратите внимание, что выше названный .animate() с длительностью 0, так что изменение цвета будет мгновенным.
Дальнейшее чтение:
Если вы не хотите включать jQuery UI, а также jQuery просто для чего-то такого простого, вы, конечно, можете использовать (не-jQuery, стандартный JS) setTimeout() функцию для постановки в очередь Ваше второе изменение CSS:
$(document).ready(function(){
var $post = $(".post").css({"color":"#0000FF"});
setTimeout(function() {
$post.css({"color":"##FF0000"});
}, 800);
});
(для анимационных эффектов jQuery используется setTimeout() внутри.)