Easings within jQuery appear as linear and swing only, but if you include jQuery UI into equation, you can get quite a lot of very nice effects. This is where you can find them.
Let me show you an example on how to easily implement easings using animate() function:
|
1 2 3 4 5 6 7 |
$( "#easeOutBounce" ).click(function() { $( ".easeOutBounce" ).animate({ height: "toggle" }, 3000, 'easeOutBounce', function() { // Animation complete. }); }); |
Some CSS:
|
1 2 3 4 5 |
.easeOutBounce { width: 200px; height: 200px; background: #000; } |
… and some HTML:
|
1 2 3 4 5 6 |
<div id="easeOutBounce"> <p>easeOutBounce</p> </div> <div class="easeOutBounce"> </div> </div> |
If you want to see how this looks like an action, have a look at my Codepen example. I’ve also posted some comments on how you can change the easing effects easily.