jQuery 悬停动画 : Can't animate opacity and background position simultaneously

Question

我正在尝试为导航元素制作动画，以便当鼠标悬停在该元素上时，它变得完全不透明(从 30% 不透明度)，并且背景图像向上移动 10 像素。这是我的代码:

<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>

但是，实际上只有列出的第一个动画会播放。如所写，背景位置有动画但不透明度没有。如果我切换不透明度和背景位置动画，那么不透明度会设置动画，但背景位置不会。我不太擅长 jQuery，但从我读过的内容来看，这似乎应该可行。谁能帮助我了解我做错了什么？

Answer 1

您没有使用正确形式的参数来为多个属性设置动画。所有属性都属于作为第一个参数传递的对象。这在 doc for 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>

仅供引用，您可能还希望 .stop(true) 从队列中删除之前的动画。