jQuery悬停动画:无法同时设置不透明度和背景位置的动画

Question

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

<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)从队列中删除先前的动画。

Answer 2

正如您所看到的here，property是CSS属性的映射，duration是第二个参数。

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