我有一个由单张图片组成的菜单(例如精灵图)。为了显示悬停图像,我只需将背景图像向下移动。我希望这种效果受jQuery控制并进行动画处理。
这是一个示例菜单项。
<ul>
<li id="home"><a href="#"></a></li>
</ul>
这是我正在尝试的内容。我非常新手jQuery,遇到了选择器不正确的问题。
$(document).ready(function(){
$('#home a');
// Set the 'normal' state background position
.css( {backgroundPosition: "0 0"} )
// On mouse over, move the background
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
你能指出我做错了什么吗?我知道选择器可能不正确,但我很难弄清如何操作锚。
$('#home a')
后面加了一个分号?那绝对是错的,会切断后面链式调用的命令。 - Pekka