Aquí está el código
https://jsfiddle.net/zdu1efrj/ $(document).ready( function() { // start box animation code let animatedBox = $('.box'); animatedBox.css('backgound', 'red'); animatedBox.animate( { left: '500px', height: '250px', width: '250px' }, 1000); animatedBox.css('background', 'blue'); animatedBox.animate( { top: '500px', height: '100px', width: '100px' }, 1000); // end box animation code });Quiero que el cuadro en la animación sea rojo siempre que se mueva verticalmente, luego cambie su color a azul y se mueva hacia abajo.
¿Por qué el código no se ejecuta en secuencia?
por animatedBox.css('background', 'blue'); parece ser ejecutado antes de la finalización de
animatedBox.animate( { left: '500px', height: '250px', width: '250px' }, 1000);``` ?El problema aquí es que la llamada animate() es asincrónica, ya que las acciones se colocan en una cola y se ejecutan más tarde. Sin embargo, las llamadas css() no están en cola/asincrónicas y, por lo tanto, se ejecutan de inmediato.
Para solucionar esto, use el argumento de devolución de llamada del método animate() para que cambie el color del elemento después de que se complete la primera secuencia de animación:
animatedBox.animate({ left: '500px', height: '250px', width: '250px' }, 1000, function() { animatedBox.css('background', 'blue'); });Sin embargo, todo esto se puede lograr de manera mucho más efectiva y con mucho más rendimiento utilizando solo CSS:
body { position: relative; } .box { position: absolute; left: 0; top: 0; width: 100px; height: 100px; position: absolute; background-color: red; animation: box-movement 2s forwards; } @keyframes box-movement { 50% { left: 500px; top: 0; height: 250px; width: 250px; background-color: red; } 100% { left: 500px; top: 500px; height: 100px; width: 100px; background-color: blue; } } <div class="box"></div>