jQuery使用相对值更改背景位置

Question

我正在尝试更改图像背景位置X＆amp; Y单击按钮时使用相对值（+ =和 - =）。它似乎重置为0％0％。它没有用。

Fiddle

$(function(){
 $("body").on("click", "#move", function() {            
    $("#obj-1").css({ 'backgroundPosition': '+=0px -=5px' });             
    return false;
 });
})

Answer 1

更改点击功能，如下所示：

$(function(){
    $("body").on("click","#move", function(){
        var backgroundPos = $("#obj-1").css('backgroundPosition').split(" ");
        var xPos = parseInt(backgroundPos[0], 10);
        var yPos = parseInt(backgroundPos[1], 10);
        var newX = xPos + 0;
        var newY = yPos - 5;
        $('#obj-1').css({
  'background-position':newX+'px '+newY+'px'
});
        return false;
    });
});

更新了小提琴here。希望它有所帮助。

Answer 2

现在点击图片每次都会从上到下移动到10px。

这是更新的jquery代码。

$(function(){
 $("body").on("click","#move", function(){
        $("#obj-1").css({
            left: $("#obj-1").position().left + 10 + "px",
            top: $("#obj-1").position().top + 10 + "px"
        }); 
 return false;
 });
})

以下是工作演示http://jsfiddle.net/kheema/8f2pf/7/