Description
A jQuery plugin from GSGD to give advanced easing options.
Please note, the easing function names changed in version 1.2.
Download
Download the following:
- jquery.easing.1.3.js
- jquery.easing.compatibility.js
(use this if you don’t want to have to change your easing type names)
I’m doing a 10K run for the Alzheimer’s Society
Learn more about the Alzheimer’s Society.
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.
jswingdefeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInSineeaseOutSineeaseInOutSineeaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirceaseInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBouncejswingdefeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInSineeaseOutSineeaseInOutSineeaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirceaseInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBounce
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
- mp3 m4r free ringtones iphone
- Translation Resources
- Directory
- Medifast Weight Loss Program
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