javascript - 在 jQuery 中从 $(this) 获取 CSS 值

Question

所以我有工作代码，可以通过插件为 BG 图像制作动画。这是一个通用的解决方案，虽然类中的每个元素都具有相同的 BG 图像；我为我的导航栏的每一列使用了一个带有独特图像的 Sprite 。因此，代码是:

$('#nav a')
.mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 -250px)"}, 
        {duration:500})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:500})
    })

效果很好，所以我可以为每个元素设置一个 Y 偏移量，但每个链接都有它自己的 x 偏移量，根本不会改变/动画化。示例 CSS:

li.downloads a {
    background:url(img/navsprite.png) repeat -318px -9px;
}

我想将 -318px -9px 滚动到类似 -318px 200px 的位置，但是对于另一个元素，我想更改 -482px -9px 到 -482px 200px。只有 Y 偏移量应该改变，但我不太了解 jQuery 的语法，无法从 $(this) 元素的 CSS 中提取该值并将其放入动画参数中。谢谢!

Answer 1

可以这样获取背景位置:

$(this).css("background-position");

您可以像这样在数组中获取两个值:

var bgpos = $(this).css("background-position").split(" ");

这允许您使用 bgpos[0] 和 bgpos[1] 访问这两个值。