Sprite

Olá, consegui resolver o problema da seguinte forma: criando outro <span> dentro do <span> que controla a opacidade e carregando o atributo style dentro desta tag, assim:

[codebox]$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $src = $(this).attr("style");
var $work = $('> span.hover', this).attr('style', $src);
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 0.8);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});[/codebox]

No fim das contas eu estava sendo redundante mas isso foi bom para que eu aprendesse um pouco de jQuery que eu não sabia nada. O motivo de precisar de um estilo inline no <a> era porque as background-images seriam definidas num sistema em PHP. Porém seria mais conveniente que eu jogasse as classes e os backgrounds num arquivo CSS gerado pelo próprio sistema, já que estes destaques seriam definidos apenas uma vez por semana!
Não sei mais o que otimizar pois o efeito trabalha apenas com o background-position então não é um efeito de :hover comum. Claro que com o javascript desabilitado funcionaria um :hover padrão nos limites do navegador..