Question

0

21

Views

I don't understand how my jQuery code is executed. how to achieve the required animation?

Here is the code

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 
});

I want the box in the animation to be red as long as it moves vertically then change its color to blue and moves down.

why isn't the code executed in sequence ?

why animatedBox.css('background', 'blue'); seems to be executed before the completion of

animatedBox.animate(
       {
           left: '500px', 
           height: '250px', 
           width: '250px'
       }, 1000);```
?

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-09T04:20:12.976Z

The issue here is because the animate() call is effectively asynchronous as the actions are placed in a queue and run at a later time. However the css() calls are not queued/async and so execute immediately.

To fix this use the callback argument of the animate() method so that you change the colour of the element after the first animation sequence completes:

animatedBox.animate({
  left: '500px',
  height: '250px',
  width: '250px'
}, 1000, function() {
  animatedBox.css('background', 'blue');  
});

However this can all be achieved much more effectively, and far more performantly, by using CSS alone:

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>