jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – adding easing

The easeOutBounce easing type adds a particularly attractive effect when used with slideDown() animations.

Note

The easing plugin can be obtained from http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js. A copy of this file is included with the companion download for this book.

In this example, we'll add some easing to our example file.

1. Change the call to the slideDown() method in slideUp.html so that it appears as follows:

   $(this).addClass("on").next().slideDown(400, "easeOutBounce");

2. Save the changed file as slideEasing.html. Don't forget to add a new <script> reference to the easing plugin directly after the jQuery reference to avoid a script error.

What just happened?

We supply the name of the easing type ...