Tengo un elemento HTML/CSS:
<div id="box"> <p> BOX </p> </div> #box { width: 100px; height: 200px; background-color: skyblue; position: absolute; left: 0px; top: 200px; text-align: center; font-family: Times New Roman; }Necesito que se mueva desde su posición en el medio de la página en diagonal hacia abajo y hacia la izquierda (hacia la esquina izquierda). He intentado esto:
$(function() { $("button").click(function() { $("#box").animate({ left: $(window).width() - 200 bottom: $(window).width() - 200 } }); });¿Cómo hago esto con jQuery y lo hago después de que haya estado en la página unos segundos (para que ocurra primero una animación diferente)?
Considera lo siguiente.
$(function() { $("button").click(function() { $("#box").animate({ left: $(window).width() - 100, top: $(window).height() - 200 }); }); }); #box { width: 100px; height: 200px; background-color: skyblue; position: absolute; left: 0px; top: 40px; 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> <button>Go</button> Estabas usando la propiedad de width para ambos. Debes usar width y height . También es mejor usar top versus bottom en este caso. Puede usar bottom , pero sugeriría algo como:
bottom: $("#box").height() De esta forma, la propiedad de la top será N Pixels desde la "Inferior".