CODEWITHSUNDEEP
jqueryjquery-ui
HNygard
HNygard

Reputation: 4796

Random hide animation on Jquery UI Dialog box

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

Upvotes: 1

Views: 2188

Answers (2)

user569825
user569825

Reputation: 2459

As requested by the askers comment, here is a solution that adds a different transition to each element. It includes pretty much every reasonable transition in a whitelisting-fashion.

The important part is the call to jQuery each().

(Thanks Rory for the randomFromTo function!)

var transitions = [
    "blind", // http://api.jqueryui.com/blind-effect/
    "bounce", // http://api.jqueryui.com/bounce-effect/
    "clip", // http://api.jqueryui.com/clip-effect/
    "drop", // http://api.jqueryui.com/drop-effect/
    "explode", // http://api.jqueryui.com/explode-effect/
    "fade", // http://api.jqueryui.com/fade-effect/
    "fold", // http://api.jqueryui.com/fold-effect/
    "highlight", // http://api.jqueryui.com/highlight-effect/
    "puff", // http://api.jqueryui.com/puff-effect/
    "pulsate", // http://api.jqueryui.com/pulsate-effect/
    "scale", // http://api.jqueryui.com/scale-effect/
    "shake", // http://api.jqueryui.com/shake-effect/
    "size", // http://api.jqueryui.com/size-effect/
    "slide" // http://api.jqueryui.com/slide-effect/
]

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}
function addRandomTransitionTo(element) {
    var effect = transitions[randomFromTo(0, transitions.length - 1)]
    $(element).click(function() {
        $(element).toggle(effect);
    });
}

$("ol li").each(function() {
    addRandomTransitionTo($(this));
});

Enjoy!

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 1

Related Questions