aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

jQuery.Transit, es un plugin de jQuery (1.4+) que nos permite trabajar con las diferentes transiciones y transformaciones de CSS3 mediante una simple nomenclatura.

Para ello, dota al atributo css() de una serie de parámetros que nos permite extender los estilos básicos tratados con jQuery.

("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

// Valores relativos
$("#box").css({ rotate: '+=30' });          // 30 degrees more
$("#box").css({ rotate: '-=30' });          // 30 degrees less

// No importa usar unidades
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });

// Multivalores
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });

Todos estos helpers implementados en css() usan la funcioón $.fn.transition() que es la encargada de gestionar las animaciones aplicadas a estos nuevos parámetros.

/*
   $('...').transition(options, [duration], [easing], [complete])
*/
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Funciona en: IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+, Mobile Safari

Un plugin de esos que te ayuda a hacer las cosas más faciles, de los que nunca viene mal conocer 😀