Posted By

Pjotor on 11/17/14


Tagged

jquery easings


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

dcruzc
JeffSFO


jQuery UI Easings


 / Published in: JavaScript
 

URL: http://pjotor.com

Ripping out the easings fron jQuery UI so it can be used stand-alone.

Easings:

  • linear
  • swing
  • Quad
  • Cubic
  • Quart
  • Quint
  • Expo
  • Sine
  • Circ
  • Elastic
  • Back
  • Bounce
  • easeInlinear
  • easeOutlinear
  • easeInOutlinear
  • easeInswing
  • easeOutswing
  • easeInOutswing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
  1. (function($) {
  2.  
  3. // based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
  4.  
  5. $.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) {
  6. jQuery.easing[ name ] = function( p ) {
  7. return Math.pow( p, i + 2 );
  8. };
  9. });
  10.  
  11. $.extend( jQuery.easing, {
  12. Sine: function( p ) {
  13. return 1 - Math.cos( p * Math.PI / 2 );
  14. },
  15. Circ: function( p ) {
  16. return 1 - Math.sqrt( 1 - p * p );
  17. },
  18. Elastic: function( p ) {
  19. return p === 0 || p === 1 ? p :
  20. -Math.pow( 2, 8 * (p - 1) ) * Math.sin( ( (p - 1) * 80 - 7.5 ) * Math.PI / 15 );
  21. },
  22. Back: function( p ) {
  23. return p * p * ( 3 * p - 2 );
  24. },
  25. Bounce: function( p ) {
  26. var pow2,
  27. bounce = 4;
  28.  
  29. while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
  30. return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
  31. }
  32. });
  33.  
  34. $.each( jQuery.easing, function( name, easeIn ) {
  35. $.easing[ "easeIn" + name ] = easeIn;
  36. $.easing[ "easeOut" + name ] = function( p ) {
  37. return 1 - easeIn( 1 - p );
  38. };
  39. $.easing[ "easeInOut" + name ] = function( p ) {
  40. return p < 0.5 ?
  41. easeIn( p * 2 ) / 2 :
  42. 1 - easeIn( p * -2 + 2 ) / 2;
  43. };
  44. });
  45.  
  46. })(jQuery);

Report this snippet  

You need to login to post a comment.