¿Cómo funciona la función de animación jquery internamente?

Question

aquí es pequeño código

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

es evidente a partir del código izquierda está aumentando y la opacidad será 0,25. cómo Jquery logra hacerlo ... hace jquery ejecutar internamente un bucle para aumentar el izquierdo y cambiar la opacidad hasta que se convierte en .25. necesita guía. gracias

Answer 1

Aumenta (o disminuye) gradualmente los valores en los períodos establecidos utilizando el temporizador. No puede usar un bucle porque si ese fuera el caso, bloquearía/congelaría el hilo principal de js mientras hacía eso y no vería la animación. Todo en js es (o debería ser) asincrónico, a través de eventos.

Answer 2

saber cómo el código animados se ve y funciona echar un vistazo a la fuente:

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