Using jQuery and JavaScript
var movableItems = new Array();
movableItems.push($('#cloud1'));
movableItems.push($('#comment1'));
if(leftPressed == true){
for(var i = 0; i < movableItems.length; i++){
var currentPosition = movableItems[i].position().left;
currentPosition += 10;
movableItems[i].css("left", currentPosition);
}
}
I'm attempting to move a group of objects across the screen when the left arrow key is pressed. I have added two objects to an array, then looping through the array to increment each object's position and update its CSS. However, the position of the objects remains unchanged which I am verifying using:
alert(
"Size: " + movableItems.length +
"\nIndex 0: " + movableItems[0] +
"\nLeft: " + movableItems[0].position().left +
"\nTop: " + movableItems[0].position().top
);
Can you identify what's causing it not to work? Or suggest a better approach. Thank you!
Corrected code:
for(var l = 0; l < movableItems.length; l++){
var tmpPosX = movableItems[l].position().left;
tmpPosX += amount * 10;
movableItems[l].css("left", tmpPosX);
}