Advanced Dialog Effects

You can give the show and hide actions of the jQuery UI dialog widget very specific effect options, like direction, and easing.

HTML

<script src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div class="dialog" title="Dialog Title">
    Dialog content
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

// You can pass a whole slew of effect options for the dialog show
// and hide actions.
$( ".dialog" ).dialog({
    minHeight: 0,
    show: {
        effect: "fold",
        direction: "up",
        easing: "easeOutCubic",
        duration: 1100
    },
    hide: {
        effect: "slide",
        direction: "down",
        easing: "easeInOutCubic"
    }
});