Estoy practicando jquery y tratando de animar un div en todas las direcciones presionando el botón de animación (una vez). El código funciona bien para mover el div hacia la derecha y hacia abajo, pero no funciona para mover el div hacia la izquierda y hacia arriba.
Este es el código que he escrito hasta ahora.
$(document).ready(function() { $("button").click(function() { for (var i = 0; i < 4; i++) { if (i == 0) { $("div").animate({ left: '250px' }); } if (i == 1) { $("div").animate({ top: '250px' }); } if (i == 2) { $("div").animate({ left: '-250px' }); } if (i == 3) { $("div").animate({ top: '-250px' }); } } }); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>Lab 8</title> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;">I am a box</div> </body> </html>Cuando establece valores negativos para la left y la top , mueven el cuadro fuera de la ventana gráfica, ya que está absolutamente posicionado con respecto al cuerpo. Establézcalos en 0px en las iteraciones 3 y 4.
Puede agregar un padre con position: relative; para observar mejor la animación (ver en modo página completa):
$(document).ready(function() { $("button").click(function() { for (var i = 0; i < 4; i++) { if (i == 0) { $("div").animate({ left: '250px' }); } if (i == 1) { $("div").animate({ top: '250px' }); } if (i == 2) { $("div").animate({ left: '0px' // Back to original position left }); } if (i == 3) { $("div").animate({ top: '0px' // Back to original position top }); } } }); }); .parent { position: relative; } .box { position: absolute; background: #98bf21; height: 100px; width: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div class="parent"> <div class="box">I am a box</div> </div>