Question

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

$('#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中提取该值并将其放入animate参数中。谢谢！

Answer 1

你可以得到这样的背景位置：

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

您可以在这样的数组中获取这两个值：

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

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

Answer 2

有一个css属性background-position-x。这仅适用于IE，因此可能不是解决您问题的有效方法 jQuery通过指定f.e.确实支持相对动画。 + = 50像素;
不知道它是否有效，但您可以尝试以下代码：

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

Answer 3

jQuery.fn.getBackgroundxPosition = function(val) {
    var position = $(this).css('background-position');
    var position_array=val.split(' ');
    var x_pos = position_array[0];

    if(typeof(position) === 'undefined'){ //IE fix
        x_pos = $(this).css('background-position-x');
    }
return x_pos;
};

我认为这样可行（未经测试）

在jQuery中从$（this）获取CSS值

3 个答案: