Breathtaking Animations with jQuery UI Easings

I was building a small web application for a customer, and I wanted to display a login prompt in a modal dialog box when the user isn’t authenticated. jQuery gives me an easy way to do that with its dialog command, so no problem there. The core functionality I’m looking for is done with one line of javascript.

// simple dialog

The dialog shows and hides just fine, but I thought I’d add some visual flair by slapping an animation on it. An easy way to do this would be to use jQuery UI’s effect methods. There are a number of basic effects to choose from: fadeIn/fadeOut, slideUp/slideDown, or even just hide/show with a delay.

// basic animations
    hide: function () {
    show:  function () {

On their own, these are okay, ho-hum animations. If you really want to snazz it up, give jQuery UI’s easings a look. Easings can be used to control the animation progression to create interesting visual effects. So, I wanted my dialog box to spring open and quickly snap into place, then do the opposite when closing. The easeOutBack and easeInBack easings combined with the scale effect are exactly what I wanted.

// animations with easings
    hide: {
        effect: "scale",
        easing: "easeInBack",
    show: {
        effect: "scale",
        easing: "easeOutBack",

I created this Fiddle as a working example. Breathtaking, right?

Author: Adam Prescott

I'm enthusiastic and passionate about creating intuitive, great-looking software. I strive to find the simplest solutions to complex problems, and I embrace agile principles and test-driven development.

5 thoughts on “Breathtaking Animations with jQuery UI Easings”

Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: