Estou tentando adicionar um efeito simples de desvanecimento / desbotamento aos botões do jQuery, mas estou um pouco preso ao desbotamento. Eu uso este código:

$('#header #menu li a').hover(function () {
  $(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
  $(this).fadeOut(0).removeClass('hover').fadeIn(0);
});

Ele adiciona uma classe hover que define um plano de fundo css e desbota a imagem em foco. Mas quando movo um cursor para fora do botão, ele simplesmente desaparece normalmente, sem desbotamento.

Você pode me ajudar com isso, por favor?

Muito obrigado por todas as respostas