jQuery Easing Plugin

Version 1.4+

use jQuery.easing 1.4+ For jQuery 3.0+

Available at GitHub

Documentation for 1.4.x is still @todo

Version 1.3

Description

A jQuery plugin from GSGD to give advanced easing options.

Download

Download the following:

Example

Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all.

Select easing types for the demo first one for down, second one for up. Then click the clicker.

Updates

  • 12/11/07 1.3 jQuery easing now supports a default easing mode. Define your preferred animation once for ALL animation.
  • 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. Renamed the equations. Added a compatibility plugin to remap the old names to the new. Worked out how extend works, so it properly no longer overwrites the defaults.
  • 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3.
  • 22/06/07 Rewritten the above to include callback syntax, nothing else has changed.

Advertisements

Credits

Uses Robert Penners easing equations for the transitions.

Donate

If you use this in a commercial project, you might consider a buying me a beer by way of thanks. Use the button below to donate to the beer fund via paypal.

Usage

Default

Choose a default easing method to overwrite the standard 'swing' animation. The easing default is 'easeOutQuad', specify your own using the following:

jQuery.easing.def = "string";

Where string is one of the equation names. The old swing function is renamed to jswing.

Custom

There are two ways to specify a custom easing method, the following are functionally identical:

$(element).slideUp(1000, method, callback});
$(element).slideUp({
    duration: 1000,
    easing: method,
    complete: callback
});

duration: is basically speed, so milliseconds or slow/fast will work here.

easing: takes an ease method see below for options (note to previous users of the plugin this has changed from easeMethod)

callback: takes a pre defined function name or an anonymous function() {} block.

Please note, you can't mix the syntax, use one format or the other, or it won't work properly.

Bonus feature

jQuery.easing.method() All your scripts can use these equations. Call from some kind of time based loop as follows:

jQuery.easing.method(
    null†,
    current_time,
    start_value,
    end_value,
    total_time
)

† this is an extra parameter not needed for the equations, but necessary for compatibility with jQuery

© 2024 GSGD