使用增量移动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 
});