Quick Tip: Add Easing to Your Animations
read 16 commentsEasing can really bring life to an effect. Easing controls how an animation progresses over time by manipulating its acceleration. jQuery has two built-in easing methods: linear and swing. While they get the job done, they are pretty boring when compared to what's made available through the jQuery easing plugin.
The jQuery easing plugin offers 30 different easing methods, courtesy of Robert Penner's easing equations. Let's check some of them out.
Easing can only be applied when using the .animate() method. The effects helper methods like .show('fast'), .toggle('fast'), fadeIn('fast'), and so on all just use the default easing, "swing."
There are two ways to use easing with the .animate() method. For example, let's say we want to animate the opacity of a particular div. The first way to call .animate() is like this:
- { opacity: 0 }, // what we are animating
- 'fast', // how fast we are animating
- 'swing', // the type of easing
- function() { // the callback
- alert('done');
- });
The second way is very similar and might even look the same at first glance.
- { opacity: 0 }, // what we are animating
- {
- duration: 'fast', // how fast we are animating
- easing: 'swing', // the type of easing
- complete: function() { // the callback
- alert('done');
- }
- });
The difference is that the second method signature takes only two arguments: the properties we are animating and an object literal of settings/options. The first method signature separates out the settings/options into individual arguments.
jQuery Easing Plugin
Finally, let's look at a few of the 30 easing methods provided by the easing plugin.
Ease Out Bounce
Ease Out Elastic
Ease Out Back
jQuery UI Easing
jQuery UI includes the easing plugin as part of its Effects Core. It also extends the effects helper methods to support the use of easing and even other types of effects. You can find the documentation for jQuery UI Effects here.
You can also define an easing value by default using something like
$.easing.def = "easeOutQuart";Nice plugin, however I think regular easing in most cases is more than enough.
Remember to have your div absolutely positioned for this to work.
Thanks for pointing that out William. To clarify a little more, you'll need to have either absolute, relative, or fixed position to animate the left property.
awesome plugin. thank you.
Easing is a great plugin and really adds life to your application. However, we should not overuse it either. I have seen applications with lots of animation that really confuses user rather than adding the feel/brand to it...
Don't forget the end user !!!
Производство и поставка - сетка самой широкой номенклатуры с различными формами,
физическими свойствами и цветовыми решениями.
Суперский должность! Блог уже в ридере
За такие местоы бно награды давать, на полном серьезе!
JQuery is by far the most documented javaScript library on the web. Nice post, thanx for sharing.
wow, must bookmark this!
great article :)
Great plugin. Will use it on a project.
K.
xv2bhnmnkrpo6auy
網站製作學習誌
Hello ShoutBox!
Gerçekten çok eğlenceli thanks:)
That is a great tutorial! I think on my next site redesign I am going to try and incorporate some sort of easing. Thanks again!
The easing plugin with Jquery , I believe has revolutionised the internet , as it enables websites to look much slicker and smoother !