Почему нижняя строчка срабатывает первей?
 

Может ли быть такое, что в JS нижняя строчка выполнится первей верхней?

Да, например, в асинхронном коде
точней, тут все выполняется последовательно, но то что в коллбеке, выполняется позже.

Вот еще пример

test()
function test(){console.log("foo")}

тут ф-ция вызывается до того как она определена. Мож не совсем в кассу, но тоже в этом роде.

Urukhay, и да, и нет. С одной стороны:

function x() {
  alert("Эта строчка выше");
}

alert("Эта строчка ниже");
x();

С другой стороны, конечно, строки выполняются по порядку. Иначе это был бы просто хаос.

Другое дело, что вопрос скорее всего возник из-за асинхронности. Вот код:

var x= setTimeout(function () {
    return "test";
}, 0);

alert(x);

Многие новички думают, x == "test". А это не так. И чем раньше это станет очевидным, тем лучше. Потому что на этом построен js.

Sweet,
Что демонстрирует ваш первый пример? Это обычное поведение, нет там ничего особенного.

Urukhay,
функция анимате -- это несколько перемещений а не одно -- вот в промежуток между этими перемещениями и сработает функция css -- если вам нужно применить css в конце анимации для этого в animate есть параметр callback -- в функцию callback и поставьте ваше css

рони, телепат?

не вводите в заблуждение людей и почитайте наконец учебники. На момент выполнения первой строки функция уже определена.
Функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода. Перед тем, как выполнять первую строку, интерпретатор сканирует код, ищет в нём Function Declaration и обрабатывает их.

до этого был код

BETEPAH,
Не надо умничать. Речь тут идет с точки зрения UI. То что под капотом происходит юзера ниибет, капитан.

И как ты себе это вообще представляешь, что реально функция вызывается до ее определения на уровне реализации? LOL.

Ясен пень, что на момент вызова она определена, как, мля, иначе может быть.