Obtenir une valeur CSS de $ (this) dans jQuery

Question

J'ai donc du code qui anime une image BG via un plugin. C'est une solution générale où chaque élément de la classe a la même image BG; J'utilise un sprite avec une image unique pour chaque colonne de ma barre de navigation. Le code est ainsi:

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

Cela fonctionne très bien, donc je peux définir un décalage Y pour chaque élément, mais chaque lien a son propre décalage x qui ne changeront pas/être animés du tout. Exemple CSS:

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

Je veux rouler le -318px -9px à quelque chose comme -318px 200px, mais pour un autre élément que je voudrais changer -482px -9px--482px 200px. Seul le décalage Y devrait changer, mais je ne connais pas assez la syntaxe de jQuery pour extraire cette valeur de l'élément CSS de $ (this) et la mettre dans les paramètres animate. Merci!

Answer 1

Vous pouvez obtenir la position d'arrière-plan comme celui-ci:

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

Vous pouvez obtenir les deux valeurs dans un tableau comme celui-ci:

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

Ce qui vous permet d'accéder à la fois des valeurs avec bgpos[0] et bgpos[1].

Answer 2

Il existe une propriété css background-position-x. Ceci est seulement disponible dans IE cependant, n'est probablement pas une solution valide pour votre problème.
jQuery prend en charge les animations relatives en spécifiant f.e. + = 50px;
Aucune idée si cela fonctionne, mais vous pouvez essayer le code suivant:

$('#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; 
}; 

Je pense que cela fonctionnera (non testé)