Animation in JS won't move

Question

I've been several hours trying to make a <div> block move left via JavaScript, then go back to original position. Not a chance.

This is the code:

JS

var block= null;

function init() {
    block= document.getElementById('myDiv');
}

function move() {
    block.style.left =  parseInt(block.style.left) + 10 + 'px';

    if(parseInt(block.style.left)>=600) {
        block.style.left = 12;
    }

    setTimeout(move,20);
}

window.onload = init;

HTML

<div id="myDiv"  onload="move();">
    <img src="image.png" id="anImage" >
</div>

CSS

#myDiv {
    position: absolute;
    bottom: 40%;
    left: 100px;
    border: 3px solid black;
}

What you see in the code are all the elements (and their styles) involved in this. The js file is loading correctly and works with other functions (changing the image inside the div, etc...).

If you see any mistakes I made please point them to me. It's my first moving animation and it can't just make it work.

Ps: It should work just with this so I'm not going to use jQuery.

Rick Hitchcock · Accepted Answer · 2015-02-10T21:02:27.323

1

Add move(); to your init function:

function init() {
  block= document.getElementById('myDiv');
  move();
}

Change your move() function as follows:

function move() {   
  block.style.left =  parseInt(block.offsetLeft, 10) + 10 + 'px';

  if(parseInt(block.offsetLeft, 10)>=600) {
    block.style.left = '12px';
  }

  setTimeout(move,20);
}

Working fiddle

edited Feb 10 '15 at 21:02

answered Feb 10 '15 at 20:56

Rick Hitchcock

35,202
5
48
79

Aaand this totally worked. Marking it as solution asap. Thank you. – Melferas Feb 10 '15 at 20:59
Use radix parameter with parseInt – Roko C. Buljan Feb 10 '15 at 21:00

Roko C. Buljan · Answer 2 · 2016-08-21T21:13:28.120

1

No, onload cannot work over a DIV element.
Put move() inside the init function, but also:
use requestAnimationFrame when possible, otherwise set a setTimeout to 1000/60ms (~60FPS), you can use Element.getBoundingClientRect() to retrieve the .left position.
To store the initial position (100) you can memorize the value directly inside your element Object using a custom property:

var block= null;

function rect(el){
  return el.getBoundingClientRect();
}

function init() {
  block = document.getElementById('myDiv');
  block.initialLeft = rect(block).left; // Store original position
  move();
}

function move() {
  var left = rect(block).left + 10;
  if(left>600) left = block.initialLeft; // Reset to initial value
  block.style.left = left +'px';
  return requestAnimationFrame(move) || setTimeout(draw, 1000/60);
}

window.onload = init;

jsBin demo

edited Aug 21 '16 at 21:13

answered Feb 10 '15 at 21:17

Roko C. Buljan

196,159
39
305
313

I really need to ask, why is it so necessary to move the move() function into the init? I mean wouldn't the "onload=move();" into the
call the function anyway? PS: Also, thanks for the alternative solution.
– Melferas Feb 10 '15 at 21:27
Great call on `requestAnimationFrame` (and the rest). However, I would stick with `offsetLeft`, because it's much faster than `getBoundingClientRect()`: http://jsperf.com/getboundingclientrect-vs-offsetwidth/22 – Rick Hitchcock Feb 10 '15 at 21:29
@Melferas, `div`'s don't have onload events. See http://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element – Rick Hitchcock Feb 10 '15 at 21:30
@Melferas The onload event can only be used on window, document, frames, images, and scripts. I forgot to remove it from the HTML cause I did not even noticed it :) – Roko C. Buljan Feb 10 '15 at 21:31
@RickHitchcock ohh... great find! Thanks for sharing (about perf. rect/offs) – Roko C. Buljan Feb 10 '15 at 21:35
@RickHitchcock Oh that's why... Silly me. Thanks a lot :) I've learnt a lot today. – Melferas Feb 10 '15 at 21:39

Animation in JS won't move

2 Answers2