jQuery悬停动画：不能同时为不透明度和背景位置设置动画答案

【问题标题】：jQuery hover animation: Can't animate opacity and background position simultaneouslyjQuery悬停动画：不能同时为不透明度和背景位置设置动画
【发布时间】：2012-09-12 03:24:36
【问题描述】：

我正在尝试为导航元素设置动画，以便当鼠标悬停在元素上时，它变得完全不透明（不透明度为 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 不是很好，但从我读过的内容来看，这似乎应该可行。谁能帮我理解我做错了什么？

【问题讨论】：

标签： jquery html css

【解决方案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) 从队列中删除上一个动画。

【讨论】：

非常感谢！我完全错过了额外的大括号。猜猜这是我在工作日晚上 11:30 尝试编码时得到的结果。 -_-
@user1234492 - 作为 StackOverflow 的新用户，您是否意识到如果您的问题得到了很好的回答，您应该通过单击左侧的复选标记将其标记为最佳答案回答？这不仅向其他读者表明哪个答案对您有用，而且还为您和提供答案的人赢得了一些声誉积分。

【解决方案2】：

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

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

【讨论】：

如果需要，可以在映射中为第二个参数传递持续时间。在 jQuery 文档中，这是.animate() 的“第二种形式”。