jquery background change one axis only

Question

I think my last question overwhelmed everybody so I will simplify

I am attempting to change the background-position of the x-axis only. By default if only one value is defined, the other defaults to 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 can I modify the function to change x-axis but leave y-axis unchanged?

edited --> this is for a sprite with 4 columns and 4 rows so the y-axis should remain dynamic. working site here: http://www.avalonbyeaw.com click "finishes." we got it working with some crazy complicated scripting on the live site, but i will leave this up here anyway because i would still really like to find a solution to this problem

Answer 1

Here's how I would do it.

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

Answer 2

Add the 2 values to background-position (as it expects). 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"
  });
}