如何让一个图片的background-position横坐标加一个值？

Question

雪碧图x=0 时是点击前的样式， x=100px 时是点击后的样式，
点击前

img1

    background: url("../images/images.png") no-repeat scroll 0 -94px;

img2

    background: url("../images/images.png") no-repeat scroll 0 -188px;

img3

    background: url("../images/images.png") no-repeat scroll 0 -282px;

点击后

img1, img2,img3分别是

background: url("../images/images2.png") no-repeat scroll 100px -94px;

background: url("../images/images.png") no-repeat scroll 100px -188px;

background: url("../images/images.png") no-repeat scroll 100px -282px;

如何编写代码？最好是jquery不是原生的

Answer 1

$('xxx').css('background-position-x', '100px');

点击这里看 demo

Answer 2

$("#img1").click(function(){
  $(this).css("background-position", "100 -94px");
})

$("#img1").click(function(){
  $(this).css({
     "background-position": "100 -94px",
     "background-image: "../images/images2.png"
  });
})

也不知道自己的JQ有没有写错，也不知道你问的是不是这个，更不知道是不是伸手党，然后朋友说，截图吧，于是，我还是截图了……

Answer 3

$().css("background-position", "100px");

不过直接操作CSS只是下下下策。应该是用 class 来控制，然后 $().addClass("actived")

Answer 4

$(selector).css('background-position', '100px -94px');