title: Random hide animation on Jquery UI Dialog box
body: <p>I have this debug tool that used Jquery UIs dialog to display some information. Just for fun, I want to have a different animation for each time box is hidden (closed with the button, etc).</p>
  
  <pre><code>$('.devTool .devToolContent').dialog({
      autoOpen: false,
      modal: true,
      hide: "explode",
      width:'auto',
      dialogClass: 'devToolDialog',
      resizable: true,
      open: function(event, ui) {
          // Make the area outside the box clickable. When cliked the dialog box closes.
          $('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); });
      }
  });
  </code></pre>
  
  <p>As you can see, I have the <strong>explode</strong> animation right now. Some of the other animations are <strong>fade</strong> and <strong>slide</strong> (see list on <a href="http://jqueryui.com/docs/hide/#option-effect" rel="nofollow">Jquery UI documentation - Hide effects</a>).</p>