Changing background in jQuery only one axis

Question

I think my last question overwhelmed everyone, so I’ll simplify

I am trying to change only the initial position of the x axis. By default, if only one value is specified, the other default value is 50% , so this function:

 function colorChangePiano() { var bp = $("background-position").css; $("#target").css('background-position', (bp == -1131) ? '-377' : '0'); } 

returns background-position: 0 50% ;

How to change the function to change the x axis, but leave the y axis unchanged?

edited -> this is for a sprite with 4 columns and 4 rows, so the y axis should remain dynamic. work site here: http://www.avalonbyeaw.com click "complete". we made him work with some crazy complicated scenarios on a live site, but I’ll leave it here anyway because I would really like to find a solution to this problem anyway

Answer 1

Here is how I would do it.

 $('#target').css('background-position', function(i, backgroundPosition) { return backgroundPosition.replace(/\d+px/, '60px'); }); 

Answer 2

Add 2 values ​​to the background-position (as expected). Also save the current position in a variable, which makes this easier.

 var pos = -377; var colorChangePiano = function() { if (pos == -377) { pos = -1131 } else { pos = -377 } $('#target').css({ 'backround-position': pos + 'px 0px' // will result in "Xpx 0px" }); }