me estoy iniciando en Javascript y pretendia hacer que el cuadrado pequeño (#animate
) recorriera el borde interior de #container
.
Se me ocurrió al ver un ejemplo de W3schools.com (https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3) pero no pude conseguirlo.
Luego intente hacerlo utilizando switch
pero por alguna razón no me funciona. El código es el siguiente:
function myMove(){
var elem = document.getElementById("animate");
//var id = setInterval(frame, 5);
var inicio = 0;
var movimiento =0;
while (inicio == 0){
switch(movimiento){
case 0:
for(var i = 0; i >= 350; i++){
elem.style.top = i + "px";
}
movimiento = 1;
break;
case 1:
for(var i = 0; i == 350; i++){
elem.style.left = i + "px";
}
movimiento = 2;
break;
case 2:
for(var i = 350; i ==0; i--){
elem.style.top = i + "px";
}
movimiento = 3;
break;
case 3:
for(var i = 350; i ==0; i--){
elem.style.left = i + "px";
}
movimiento = 4;
break;
case 4:
break;
}
if (movimiento == 4) {
inicio = 1;
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>