adding a variable Number to div position in jquery?

Question

I got the following code to work with .animate, but it won't with standard css properties, could anyone tell me why?

var xMove = 200;
$("#clickhere").click(function() { 
$("#object").css({left: '+='+xMove});  
});

Got a few similar working approaches now and learnt a bit about syntax along the way, good show people, Ta!

Answer 1

Try

$(document).ready(function(){
  var xMove = 200;
  var object = $('#object');
    $("#clickhere").click(function() {
        object.animate({
            left:  (object.position().left + xMove) + 'px'
        });  
    });
});

Remember that #object needs to have position absolute or relative when working with the css left property. If its static you can try to animate margin-left instead.

Answer 2

Add the CSS attribute position, and set it to relative; it'll work. I've also removed the +=, since it doesn't belong there:

var xMove = 200;
$("#clickhere").click(function() { 
    $("#object").css({position: "relative",left: xMove});  
});

If you want to move your object the number of pixels defined by xMove to the right every time you click it, you can use the following code snippet:

var xMove = 200;
$("#clickhere").click(function() {
    var obj = $("#object");
    var currentPosition = obj.position().left;
    obj.css({position: "relative",left: currentPosition + xMove});  
});

Answer 3

Try this, should work,

var leftpos = $("#object").css("left"); // get the current left position
var left = parseFloat(leftpos , 10);
left += 200;
var toShift = left + "px";
$("#object").css("left", toShift );

Answer 4

You can't use the += operator in regular CSS. Get the current position and calculate the new positon from that:

var xMove = 200;
$("#clickhere").click(function() {
  $("#object").css({ left: ($('#object').position().left + xMove) + 'px' });
});

Answer 5

2 things. First of all, left does nothing in CSS unless you set a different position type. So make sure #object has position:relative (or absolute, or fixed).

Second, you can't use += in the value string like that. You would have to fetch the value add your value, then set it to do this.

Checkout this working example: http://jsfiddle.net/d9LnJ/4/

But really, why not just use .animate?