Problem in animation!! Please help me to solve it!!

Question

It's not clear here with 'if'!!

//Codes for making Animation..

var pos = 0;
//our box element
var box = document.getElementById("box");
var t = setInterval(move, 10);

function move() {
if(pos >= 150) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+"px";
}
}

Here, it's been said that if pos is equal to or is greater than 150 then it would stop the animation at 10.

else, pos should go with 1px per animation.

in if and else we know that if 'if' does not meet the requirement then it runs with else values.

right?

please help me to understand it!!

Thanks!!

Answer 1

it says right. understand how it works it runs a loop and the loop keeps changing the position every 10 ms but you want to slow it after 150 requesting frames so after that instead of executing the second case it will execute the first case and that will instead of changing too much will change a little and animation will slow when it reaches a limit. if you want simple animation you can remove that

Answer 2

The 'left' value would continue to increase by one, 1 pixel until it is greater than or equal to 150'pixels'.

Since it can not be greater than 150pixels before it is equal to 150pixels, then the function 'clearInterval(t)' would be called once the value for left is equal to 150pixels.

Hence stopping the animation from moving more than its limits - 150pixels.

10 there is the time interval in milliseconds at which the animation moving the box 1pixel away is to be called.

That is, every 10millisecond the box would move (animate) 1pixel in the left direction.

The box would continue moving 1pixel in the left direction every 10millisecond until the distance in the left direction is 150pixels.