Tengo esta animación donde un cuadro se mueve de una parte de la página a otra con el clic de un botón de inicio.
¿Cómo haría que el cuadro desapareciera de la página después de completar la animación?
$(function() { $("button").click(function() { $("#box").animate({ left: $(window).width() - 800 }); }); }); #box { width: 100px; height: 200px; background-color: skyblue; position: absolute; left: 0px; top: 300px; text-align: center; font-family: Times New Roman; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"> <p> BOX </p> </div> <div id="box"> <p> Box </p> </div> <button>Start</button>Puede ejecutar esto ahora mismo, solo agregue el evento completo y funcionó. Lea también sobre .animate
editado: Actualice Jquery a la versión 3.6.0
$(function() { $("button").click(function() { $("#box").animate({ left: $(window).width() - 800 },{ complete: function () { // complete call back $("#box").hide(); // can hide or remove this elemenet } }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="box"> <p> Box </p> </div> <style type='text/css'> #box { width: 100px; height: 200px; background-color: skyblue; position: absolute; left: 0px; top: 50px; text-align: center; font-family: Times New Roman; } </style> <button>Start</button>Considera lo siguiente.
$(function() { $("button").click(function() { $("#box").animate({ left: $(window).width() - $("#box").width() }, function() { $("#box").fadeOut(); }); }); }); #box { width: 100px; height: 200px; background-color: skyblue; position: absolute; left: 0px; top: 300px; text-align: center; font-family: Times New Roman; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="box"> <p>BOX</p> </div> <button>Start</button> Con .animate() , puede pasar una función anónima para usar una vez que se complete la animación. Opté por usar .fadeOut() para ocultar el elemento. Hay muchas maneras de hacer esto.
Por favor mira: