Advanced Dialog Effects

The jQuery UI dialog widget has a show, and a hide option — each of which are used to specify effect options for their respective actions. The show option is applied any time the dialog is opened, while the hide option is applied when the dialog is closed. They're one of those options that tries to be flexible, and at times this is misleading. For example, you're free to pass in a string, a boolean, a number, or an object with several effect properties. Everything other than the object type are intended to simplify the option. If you only want to enable the show/hide effect, you pass a boolean. If you want to specify the duration you pass a number while a string specifies the effect name to run.

The object form of the options let's you get specific with the look and feel of the show/hide effects. You can control every aspect as the other option data types, in addition to some other effect properties. Like direction and easing properties. For example, here's one way to configure a dialog widget using very specific effect properties.

$( ".dialog" ).dialog({
    show: {
        effect: "slide",
        direction: "up",
        easing: "easeOutCubic",
        duration: 1100
    },
    hide: {
        effect: "slide",
        direction: "down",
        easing: "easeInOutCubic"
    }
});

The direction, the easing, and the duration values are passing to the effect that's run. In general, it's better to use this object form for the show/hide dialog options even if you don't need the advanced effect features. It reads better because it explicitly labels what each value is doing.