Question

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).

$('.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'); });
    }
});

As you can see, I have the explode animation right now. Some of the other animations are fade and slide (see list on Jquery UI documentation – Hide effects).

Answer 1

Try this:

var transitions = ["explode", "fade", "slide"]

$('.devTool .devToolContent').dialog({
    autoOpen: false,
    modal: true,
    hide: transitions[randomFromTo(0, transitions.length - 1)],
    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'); });
    }
});

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

It defines an array at the beginning which contains all the possible jQuery UI effects you’d like to choose. Then it picks a random one and sets it as the hide parameter for the dialog.