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

Question

我試圖在單擊按鈕時使用相對值（+ =和-=）更改圖像背景位置X和Y。 似乎將自己重置為0％0％。 它沒有工作。

小提琴

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

更新小提琴這里 。 希望能幫助到你。

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/