O'Reilly logo

Mastering jQuery by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing custom animations

If you've spent any time developing jQuery code that animates objects or elements on a page, you will no doubt have used either the jQuery UI or possibly a plugin, such as jQuery Easing, created by George Smith (http://gsgd.co.uk/sandbox/jquery/easing/).

Both are great ways of animating objects on a page, using easing methods such as easeIn() or easeOutShine(). The trouble is that both require the use of plugins, which add unnecessary baggage to our code; they are also a very safe way of achieving the effect we need. What if I said we don't need either and can produce the same effects just by using jQuery itself?

Before I go through how to do this, let's take a look at a working demo that shows this in action:

  1. Let's make ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required