Básicamente, digamos que tengo un cuadro creado en HTML/CSS.
<style type='text/css'> #box { width: 48px; height: 48px; background-color: black; position: absolute; left: 280px; top: 180px; } </style>El estilo no importa tanto.
¿Cómo hago para que ese cuadro comience en el lado izquierdo de la página y presione un botón de inicio que lo lleve aproximadamente a la mitad de la página SIN tener que presionar un botón de parada usando JavaScript?
Sé cómo moverlo con las teclas de flecha, un movimiento continuo o un botón de inicio y luego detención, pero no cómo simplemente cambiar la posición.
Considera lo siguiente.
$(function() { $("button").click(function() { $("#box").animate({ left: $(window).width() - $("#box").width() }); }); }); #box { width: 48px; height: 48px; background-color: black; position: absolute; left: 280px; top: 180px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"></div> <button>Go</button>También puede hacer esto con estilo sin animación.
#box.moved { left: calc(100% - 48px); }