Easing with jQuery

jQuery.ease v1.0 and Vanderlee Easings v1.0

A convenient plug-in for easy access to jQuery easing methods and a number of new easing methods.

Demo: http:/martijn.vanderlee.com/demo/easing

Source: https://github.com/vanderlee/easing (MIT licensed)

[pageview url=”http://martijn.vanderlee.com/demo/easing”]

jQuery.ease

Syntax:

[js]$.ease(method, fraction);[/js]

Arguments:
  • method (string, required)
    The name of the easing method to be used, i.e. ‘linear’ or ‘swing’.
  • fraction (float, required)
    A floating point number between 0 and 1 (set [0,1]) that indicates the current time as a fraction of the total duration, 0 being begin, 1 end.
Return:
  • (float) A value between 0 and 1, indicating the level returned by easing for a begin value of 0 and an end value of 1.
Examples:

[js]$.ease(‘swing’, .5); // returns the exact middle of the swing easing.[/js]

Vanderlee Easings

The following easing methods are added:

  • random…
    • random
    • halfRandom
    • quarterRandom
    • eighthRandom
  • chance
  • cosBounce…
    • cosBounceIn
    • cosBounceOut
    • cosBounceInOut
  • waves…
    • twoLightWaves
    • twoWaves
    • twoHeavyWaves
    • fourLightWaves
    • fourWaves
    • fourHeavyWaves
    • eightLightWaves
    • eightWaves
    • eightHeavyWaves
    • sixteenLightWaves
    • sixteenWaves
    • sixteenHeavyWaves
  • steps…
    • twoSteps
    • fourSteps
    • eightSteps
    • sixteenSteps
Internally, some of these share the same code, hence the groups in the above list. You can only use the ones which are not italic.

Leave a Reply