Question

jQuery + JavaScript

       var movable = new Array();
       movable.push($('#cloud1'));
       movable.push($('#comment1'));

        if(left == true){ 
            for(i = 0; i < movable.length; i++){
                movable[i].position().left += 10;
                movable[i].css("left", movable[l].position().left);                   
            }
        }

I’m trying to move a set of objects across the screen while the left arrow key is pressed. I’ve added two objects to an array, and i’m then attempting to loop through the array, increment that objects position, and then update its css. However the position of the object always stays the same which i’ve checked using:

            alert(
            "Size: " + movable.length +
            "\nIndex 0: " + movable[0] +
            "\nLeft: " + movable[0].position().left + 
            "\nTop: " + movable[0].position().top 
            ); 

Can you see why it’s not working? Or tell me a better approach. Thanks!

Working code:

for(l = 0; l < movable.length; l++){
    var tmpPosX = movable[l].position().left;
    tmpPosX += amount * 10;
    movable[l].css("left", tmpPosX);                   
}

Answer 1

.position() is not a ‘set’ method; you can only use it to get the position.

http://api.jquery.com/position/

movable[i].offset({left:movable[i].position().left+10}) should work, though.

http://api.jquery.com/offset/#offset2