Estoy tratando de hacer que un cuadrado se mueva hacia adelante y hacia atrás presionando un botón una vez con javascript. Puedo hacer que se mueva hacia el borde derecho, pero no sé cómo hacer que se mueva hacia atrás. Ayuda apreciada.
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = 0; clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.left = pos + "px"; } } } #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } <body> <p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div> </div>Sé que está solicitando una solución basada en javascript, pero vale la pena señalar que este tipo de presentación se puede lograr solo con CSS .
Entonces, en aras de la exhaustividad, estoy publicando una solución solo de CSS a continuación.
NB Hay una diferencia clave entre lo que CSS es capaz de hacer y lo que JS es capaz de hacer.
Tenga en cuenta que en el siguiente ejemplo solo de CSS, cada vez que haga clic en el botón, tendrá que hacer clic fuera del botón antes de que el botón vuelva a funcionar.
Ejemplo de trabajo solo con CSS:
.move-square-button { display: block; margin-bottom: 12px; cursor: pointer; } .container { width: 400px; height: 144px; position: relative; background-color: yellow; } .square { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: red; transform: translateX(0); } .move-square-button:focus { cursor: not-allowed; } .move-square-button:focus + .container .square { animation: moveSquareRightThenLeft 2s linear; } @keyframes moveSquareRightThenLeft { 50% { transform: translateX(calc(400px - 100%)); } } <button class="move-square-button" type="button">Click Me</button> <div class="container"> <div class="square"></div> </div>No es la solución más bonita, pero debería funcionar. Esencialmente, si el rectángulo alcanza el borde derecho, la variable " inverseDirection " se invierte de falso a verdadero y, por lo tanto, la variable pos disminuye en lugar de incrementarse. Lo contrario sucede en el borde izquierdo.
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = 0; let inverseDirection = false; clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos === 350 && !inverseDirection) { inverseDirection = true; }else if(pos === 0 && inverseDirection){ inverseDirection = false; } pos = (inverseDirection) ? pos-1 : pos+1; elem.style.left = pos + "px"; } } #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>cada vez que llama a la función myMove, tiene pos establecido en 0. Debe calcular la posición sobre la marcha y, según esa lógica, la moverá hacia la derecha o hacia la izquierda. suponga que la longitud es 350, puede hacer algo como esto:
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = elem.offsetLeft; let dir = ""; if(pos === 0) { dir = "right"; } else { dir = "left"; } clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos == 350 && dir == "right") { clearInterval(id); } if (pos == 0 && dir == "left") { clearInterval(id); } else if(dir === "right") { pos++; elem.style.left = pos + "px"; } else if(dir === "left") { pos--; elem.style.left = pos + "px"; } } } #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } <body> <p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div> </div>