jQuery悬停动画:Can';t同时设置不透明度和背景位置的动画
我正在尝试设置一个导航元素的动画,这样当鼠标悬停在该元素上时,它将变得完全不透明(从30%不透明),背景图像将上移10像素。这是我的代码:jQuery悬停动画:Can';t同时设置不透明度和背景位置的动画,jquery,html,css,Jquery,Html,Css,我正在尝试设置一个导航元素的动画,这样当鼠标悬停在该元素上时,它将变得完全不透明(从30%不透明),背景图像将上移10像素。这是我的代码: <script type="text/javascript"> $(document).ready(function(){ $('#topnav li') .mouseover(function(){ $(this).stop().animate( {'background-position-y': '28px'},
<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>
$(文档).ready(函数(){
$('topnav li')
.mouseover(函数(){
$(this).stop().animate(
{'background-position-y':'28px'},
{不透明度:1},
{持续时间:100})
})
.mouseout(函数(){
$(this).stop().animate(
{'background-position-y':'38px'},
{不透明度:0.3},
{持续时间:100})
})
});
但是,只有列出的第一个动画实际播放。如前所述,背景位置会设置动画,但不透明度不会。如果切换不透明度和背景位置动画,则不透明度将设置动画,但背景位置不会。我对jQuery不是很在行,但从我所读到的来看,这似乎应该是可行的。有人能帮我理解我做错了什么吗?您没有使用正确形式的参数来设置多个属性的动画。所有属性都属于作为第一个参数传递的对象。这在现实中是很清楚的
$(文档).ready(函数(){
$('topnav li')
.mouseover(函数(){
$(此)。停止(真)。设置动画(
{'background-position-y':'28px',不透明度:1},
{持续时间:100})
});
.mouseout(函数(){
$(此)。停止(真)。设置动画(
{'background-position-y':'38px',不透明度:0.3},
{持续时间:100})
});
});
仅供参考,您可能还希望
.stop(true)
从队列中删除以前的动画。您没有使用正确形式的参数设置多个属性的动画。所有属性都属于作为第一个参数传递的对象。这在现实中是很清楚的
$(文档).ready(函数(){
$('topnav li')
.mouseover(函数(){
$(此)。停止(真)。设置动画(
{'background-position-y':'28px',不透明度:1},
{持续时间:100})
});
.mouseout(函数(){
$(此)。停止(真)。设置动画(
{'background-position-y':'38px',不透明度:0.3},
{持续时间:100})
});
});
仅供参考,您可能还希望.stop(true)
从队列中删除上一个动画。如您所见,属性是CSS属性的映射,持续时间是第二个参数。
$(this).stop().animate({
'background-position-y': '28px',
'opacity': 1
}, 100)
如您所见,属性
是CSS属性的映射,持续时间
是第二个参数。
$(this).stop().animate({
'background-position-y': '28px',
'opacity': 1
}, 100)
非常感谢你!我完全错过了额外的花括号。我猜这就是我在工作日晚上11:30尝试编码的结果-_-@user1234492-作为StackOverflow的新用户,您是否意识到如果您的问题得到了一个好的答案,您应该通过单击答案左侧的复选标记将其标记为最佳答案?这不仅向其他读者表明哪个答案对你有用,而且也为你和提供答案的人赢得了一些声望。非常感谢!我完全错过了额外的花括号。我猜这就是我在工作日晚上11:30尝试编码的结果-_-@user1234492-作为StackOverflow的新用户,您是否意识到如果您的问题得到了一个好的答案,您应该通过单击答案左侧的复选标记将其标记为最佳答案?这不仅可以向其他读者指出哪个答案对你有效,还可以为你和提供答案的人赢得一些声誉分数。如果需要,可以在地图中为第二个论点传递持续时间。在jQuery文档中,这是.animate()
的“第二种形式”。如果需要,可以在第二个参数的映射中传递持续时间。在jQuery文档中,这是.animate()
的“第二种形式”。