Почему не срабатывает метод “delay” (jQuery)?

Функция .delay() устанавливает задержку перед выполнением очередной функции в очереди. Вы можете поставить свою функцию в очередь с помощью .queue().

$(".user-panel-header .user-panel__head").delay(500).queue(function (next) { 
  $(this).css("background", "transparent");
  next();
});

Такой способ может оказаться более удобным, чем .setTimeout(), в случае если нужна более сложная манипуляция с элементами. Например,

$(selector)
    .delay(500)
    .queue(function (next) { /* что-то делаем */ })
    .delay(500)
    .fadeOut();

Вот выдержка из документации jQuery:

Команда .delay() позволяет установить время задержки выполнения следующих функций анимационных эффектов в очереди для каждого элемента набора jQuery

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

setTimeout(function() {
     $(".user-panel-header .user-panel__head").css("background","transparent");
}, 500)