JQuery está escrito en Javascript. Como alguien que sabe un poco de cada uno, me pregunto cómo escribieron algo de eso. ¿Cómo se animan elementos HTML en Javascript puro? ¿Simplemente está actualizando repetidamente la propiedad de CSS que se va a animar, utilizando la manipulación DOM estándar, con devoluciones de llamada para que sea asíncrona? ¿O es algo más sofisticado?¿Cómo hace JQuery las animaciones?
Las animaciones jQuery solo están actualizando las propiedades de CSS en un temporizador recurrente (lo que lo hace asíncrono).
También implementan un algoritmo de interpolación que realiza un seguimiento de si la animación está adelantada o atrasada y ajustan el tamaño del paso en la animación en cada paso para ponerse al día o ralentizar según sea necesario. Esto permite que la animación termine en el tiempo especificado independientemente de qué tan rápido sea la computadora host. La desventaja es que las computadoras lentas u ocupadas mostrarán más animaciones entrecortadas.
También son compatibles con las funciones de relajación que controlan el tiempo/forma de la aceleración de la animación. Linear significa una velocidad constante. Swing es más típico, comienza lentamente, acelera a la velocidad máxima en el medio y luego termina lentamente.
Dado que las animaciones son asincrónicas, jQuery también implementa una cola de animación para que pueda especificar varias animaciones que desea ver ejecutadas una después de la otra. La segunda animación comienza cuando termina la primera animación y así sucesivamente. jQuery también ofrece una función de finalización, por lo que si desea que se ejecute parte de su propio código cuando se completa una animación, puede especificar una función de devolución de llamada que se llamará cuando finalice la animación. Esto le permite realizar alguna operación cuando la animación está completa, como iniciar la animación de otro objeto, ocultar un objeto, etc.
FYI, jQuery javascript source code está completamente disponible si desea obtener más información. El núcleo del trabajo está en una función local llamada doAnimation(), aunque gran parte del trabajo se realiza en las funciones llamadas step y update que se pueden encontrar con la definición de jQuery.fx.prototype.
Al inspeccionar el elemento durante una animación jQuery casi siempre cambia el código CSS, que se asigna al elemento a través de jQuery que no está realmente asignado desde el HTML que se escribe. Obtén FireBug si no lo tienes para Firefox e inspecciona lo que sucede mientras se ejecutan las animaciones.
Sin haber leído el código yo mismo, por lo que entiendo está usando métodos y propiedades JavaScript estándar para actualizar los elementos DOM y estilos CSS a intervalos regulares ("ticks"), lo cual logra utilizando los métodos estándar setInterval() y setTimeout() .
Eso es todo: un viejo set simpleInterval y algo de manipulación DOM.
Por supuesto, el código es un poco más complejo que eso.
Mirar: http://code.jquery.com/jquery-latest.js, cerca del final del archivo. Busque jQuery.fx.prototype.
Te das cuenta de que puedes abrir cualquier archivo Jquery.js y verlo por ti mismo ¿no? Aquí está el código fuente oficial en su totalidad: https://github.com/jquery/jquery/tree/master/src – asawyer
[¿Por qué no echar un vistazo a ti mismo?] (Http://code.jquery.com/jquery- 1.7.2.js) –
@asawyer sí, pero la fuente no sirve para una explicación técnica. Simplemente muestra cómo está bajando, no por qué se hace de esa manera y cómo algo así funciona en teoría. –