Enabling dialog animations

The dialog provides us with a built-in effect that can be applied to the opening or closing (or both) phases of the widget. There is only a single effect that we can use, which is an implementation of the scale effect (we'll look at this in more detail in Chapter 13, Selecting and Sorting with jQuery UI). Change the final <script> element in dialog7.html to the following one:

<script>
  $(document).ready(function($){
    $("#myDialog").dialog({
      show: true,
      hide: true
    });
  });
</script>

Save this as dialog8.html. We set both the hide and show options to the Boolean value true. This enables the built-in effect, which gradually reduces the dialog's size and opacity until it gracefully disappears. The following screenshot shows an effect in motion:

We can enable or disable either the show or hide animations individually using Booleans, as we have in this example. We could also specify the type of animation to be used by supplying a string...