I want to animate a box in Javascript to the right and then back to original position.

Question

I have successfully animated it from 0 to 150px along x. But trying to do it reverse using negative values it's not working. I need help figuring out what's not correct.
https://code.sololearn.com/WRa2HcG7j2pN/?ref=app

Answer 1

Here's how your script should look like:

<script>
var t=setInterval(moveright,50);
var pos=0
var box=document.getElementById("box");

function moveright(){
if(pos>=150){
clearInterval(t);
t=setInterval(moveleft,100);
}
else{
pos +=1;
box.style.left=pos+"px";
}
}

function moveleft(){
if(pos<=0){
clearInterval(t);
}
else{
pos -=1;
box.style.left=pos+"px";
}

}
</script>

Answer 2

after several attempts finally,
https://code.sololearn.com/Wf1Nm8lIY8b0/?ref=app

Answer 3

Sure it works Shudarshan. Is there a way we can have it move to and from those position continuously?

Answer 4

Like loop continuously