How does the jquery animate function work internally?

Question

here is 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 is clear from the code left is increasing and opacity will be .25. how jquery manage to do so...does jquery internally execute a loop to increase the left and change the opacity until it becomes .25. need guidance. thanks

Answer 1

It's gradually increases (or decreases) values at set periods using timer. It can't use a loop because if that was the case it would block/freeze the main js thread while doing that and you wouldn't see the animation. Everything in js is (or should be) asynchronous, via events.

Answer 2

To know how the animate code looks and works have a look at the source:

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