在jQuery中獲取$（this）的CSS值

因此，我有一個工作代碼，通過插件爲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中提取該值並將其放入動畫參數中。謝謝！

來源

2010-02-12 Alex Mcp

你可以得到的背景位置是這樣的：

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

您可以在這樣一個陣列得到兩個值：

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

，讓您與bgpos[0]和bgpos[1]訪問這兩個值。

來源

2010-02-12 16:46:31 Sampson

，並且都在X和Y屬性進一步選擇？理想情況下，我想要說的「改變背景位置：（$ x -200px）」或類似的東西 – 2010-02-12 16:47:58

@亞歷克斯：請參閱我的更新文本。您可以通過數值分割後的數組條目來引用這兩個數組。 – Sampson 2010-02-12 16:49:06

在這一點上，我認爲你需要使用正則表達式來得到你的值 – Mike 2010-02-12 16:49:22

有一個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}) 
    })

來源

2010-02-12 16:51:01

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; 
};

我認爲這會工作（未測試）

來源

2010-02-12 16:52:10 Tim

在jQuery中獲取$（this）的CSS值

回答

相關問題