使用增量移動css位置

Question

我正在嘗試使用jQuery和css從當前位置移動元素位置。但是，我使用似乎並沒有語法上，做任何事情：

var ball = $("#ball1"); 
var movement = { 
    x: 5, 
    y: 5 
} 
ball.css({ 
    top: "+="+movement.y, //+= adds the value 
    left: "+="+movement.x 
}); 

任何人都可以證實，如果我的ball.css({下的代碼是正確的？

Answer 1

這是不正確的。你給使用這樣

ball.css({ 
    top: parseInt(ball.css('top')) + movement.y + 'px', 
    left: parseInt(ball.css('left')) + movement.x + 'px' 
}); 

獲取計算樣式屬性在匹配的元素集合的第一個元素。

，你可以在documentation網站上看到，jQuery.css會給我們的計算值，這意味着我們沒有得到15如果left值15px，例如。爲此，我們必須使用parseInt。檢查這個答案更好的用法parseInt。因此，這應該在它的工作，但有人回答對後，我們可以創建一個jQuery插件，讓它看起來更好：

jQuery.fn.cssNumber = function(prop){ 
    var v = parseInt(this.css(prop), 10); 
    return isNaN(v) ? 0 : v; 
}; 

ball.css({ 
    top: ball.cssNumber('top') + movement.y + 'px', 
    left: ball.cssNumber('left') + movement.x + 'px' 
}); 

我也爲你創建了一個working example。

Answer 2

嘗試......

ball.css({ 
    top: +movement.y, 
    left: +movement.x 
});