Animação instantânea do jQuery: Não é possível animar a opacidade e a posição do plano de fundo simultaneamente - jquery, html, css

Estou tentando animar um elemento de navegação para que, quando o mouse passar sobre o elemento, ele se torne totalmente opaco (de 30% de opacidade) e a imagem de plano de fundo se mova 10 pixels para cima. Este é o meu código:

<script type="text/javascript">
$(document).ready(function(){
$("#topnav li")
.mouseover(function(){
$(this).stop().animate(
{"background-position-y": "28px"},
{opacity: 1},
{duration:100})
})
.mouseout(function(){
$(this).stop().animate(
{"background-position-y": "38px"},
{opacity: 0.3},
{duration:100})
})
});
</script>

No entanto, apenas a primeira animação listada realmentetocam. Conforme escrito, a posição do plano de fundo é animada, mas a opacidade não. Se eu alternar a opacidade e as animações de posição de fundo, a opacidade será animada, mas a posição de fundo não. Não sou muito bom com jQuery, mas pelo que li, parece que isso deve funcionar. Alguém pode me ajudar a entender o que estou fazendo de errado?

Respostas:

Você não está usando a forma correta de argumentos para animar várias propriedades. Todas as propriedades pertencem ao objeto que é passado como o primeiro argumento. Isso é bastante claro no doc para jQuery .animate().

<script type="text/javascript">
$(document).ready(function(){
$("#topnav li")
.mouseover(function(){
$(this).stop(true).animate(
{"background-position-y": "28px", opacity: 1},
{duration:100})
});
.mouseout(function(){
$(this).stop(true).animate(
{"background-position-y": "38px", opacity: 0.3},
{duration:100})
});
});
</script>

Para sua informação, você provavelmente também quer .stop(true) para remover a animação anterior da fila.

Como você pode ver Aqui, a property é um mapa de propriedades CSS e duration é o segundo parâmetro.

$(this).stop().animate({
"background-position-y": "28px",
"opacity": 1
}, 100)