How does jquery animation function work inside?

Question

here is a small code

<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" style="position: relative; left: 10px;" /> $('#clickme').click(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); }); 

it can be seen that the code on the left is increasing, and the opacity will be .25. how jquery deals with this ... makes jquery internally execute a loop to increase the left and change the opacity until it becomes .25. need guidance. thanks

Answer 1

It gradually increases (or decreases) the values ​​in specified periods using a timer. It cannot use a loop, because if that were the case, it would block / freeze the main js thread by doing this and you would not see the animation. Everything in js (or should be) asynchronously, through events.

Answer 2

To find out how the animation code looks and works, check out the source code:

https://github.com/jquery/jquery/blob/master/src/effects.js