jQuery

jQuery easing just got a lot cooler.

jQuery 1.4 was just released yesterday and I have been eagerly checking out the new features. My personal favorite is the new ability to ease per-property.

Easing is a function that allows you to smooth your animations in or out. For example, imagine an apple falling out of a tree. It doesn’t just drop at a constant rate, it gradually generates speeds as gravity pulls it to the ground. In the world of jQuery, this would be an example of easing in.

Easing has existed in jQuery in previous versions, but now in version 1.4 you are no longer are you limited to one ease for an animation. Within a single animation you can specify how you want each property to ease. For Example:

$("#box").animate({
    left: [700, 'easeOutElastic'],
    top: 300
 }, 1500);

As you can see in the above code, not only am I easing using the jQuery default swing ease, but I am also easing the #box left using ‘easeOutElastic‘. To specify easing for each property, simply define the property as an array where the first value is what you want to animate to and the second is the type of ease.

If you would like to see this new ability in action, check out my demo.