Tengo las siguientes funciones. Quiero que el cuadro 3 se mueva solo después de que el cuadro 1 y el cuadro 2 hayan terminado de moverse. En este momento, se está moviendo de inmediato. Supongo que pondría todas las funciones bajo una función .click, pero lo intenté varias veces y todavía no funciona.
$(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); }); $("button").click(function() { $("#box2").animate({ left: $(window).width() - 800 }, { complete: function() { // complete call back $("#box2").hide(); // can hide or remove this element }, }); }); $("button").click(function() { $("#box3").animate({ right: $(window).width() - 200, top: $(window).height() - 200 }); }); }); #box1, #box2, #box3 { width: 30px; height: 50px; position: absolute; text-align: center; font-family: Times New Roman; } #box1 { background-color: skyblue; left: 0px; top: 50px; } #box2 { background-color: green; left: 0px; top: 120px; } #box3 { background-color: black; left: 100px; top: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button> Start </button> <div id="box1"> <p> BOX 1 </p> </div> <div id="box2"> <p> BOX 2 </p> </div> <div id="box3"> <p> BOX 3 </p> </div>Si lo entiendo correctamente, simplemente aplasté los dos primeros controladores de clic y moví la animación del tercero a la devolución de llamada complete en el n. ° 2.
$(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").animate({ left: $(window).width() - 800 }, { complete: function() { // complete call back $("#box2").hide(); // can hide or remove this element $("#box3").animate({ right: $(window).width() - 200, top: $(window).height() - 200 }); } }); }); }); #box1, #box2, #box3 { width: 30px; height: 50px; position: absolute; text-align: center; font-family: Times New Roman; } #box1 { background-color: skyblue; left: 0px; top: 50px; } #box2 { background-color: green; left: 0px; top: 120px; } #box3 { background-color: black; left: 100px; top: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button> Start </button> <div id="box1"> <p> BOX 1 </p> </div> <div id="box2"> <p> BOX 2 </p> </div> <div id="box3"> <p> BOX 3 </p> </div>