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
$("#dialog").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
$("#dialog").dialog({
    hide: function () {
        $(this).fadeOut();
    },
    show:  function () {
        $(this).fadeIn();
    }
});

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
$("#dialog").dialog({
    hide: {
        effect: "scale",
        easing: "easeInBack",
    },
    show: {
        effect: "scale",
        easing: "easeOutBack",
    }
});

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

Advertisements

5 thoughts on “Breathtaking Animations with jQuery UI Easings”

Leave a comment

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s