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

Ale*_*Mcp 1 javascript css jquery jquery-animate

所以我有工作代码通过插件动画BG图像.这是一个通用的解决方案,尽管类中的每个元素都具有相同的BG图像; 我正在为导航栏的每一列使用带有唯一图像的精灵.因此代码如下:

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

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

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

我想滚-318px -9px喜欢的东西-318px 200px,但另一种元素我想换-482px -9px-482px 200px.只有Y偏移量应该改变,但我不知道jQuery的语法是否足以从$(this)元素的CSS中提取该值并将其放入animate参数中.谢谢!

Sam*_*son 5

您可以像这样获得背景位置:

$(this).css("background-position");
Run Code Online (Sandbox Code Playgroud)

您可以在数组中获取这两个值,如下所示:

var bgpos = $(this).css("background-position").split(" ");
Run Code Online (Sandbox Code Playgroud)

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