我正在尝试为导航元素设置动画,以便当鼠标悬停在元素上时,它会变得完全不透明(从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不太满意,但从我读过的内容来看,这似乎应该可行。谁能帮我理解我做错了什么?
答案 0 :(得分: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)
从队列中删除上一个动画。
答案 1 :(得分:0)
正如您所见here,property
是CSS属性的地图,duration
是第二个参数。
$(this).stop().animate({
'background-position-y': '28px',
'opacity': 1
}, 100)