jquery - Jquery UI 对话框上的随机隐藏动画

Question

我有这个调试工具，它使用 Jquery UI 对话框来显示一些信息。只是为了好玩，我希望每次隐藏框(用按钮等关闭)时都有不同的动画。

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

如您所见，我现在有爆炸动画。其他一些动画是淡入淡出和滑动(请参阅 Jquery UI documentation - Hide effects 上的列表)。

Answer 1

根据提问者评论的要求，这里有一个解决方案，它向每个元素添加不同的过渡。它几乎包括白名单方式中的所有合理过渡。

重要的部分是调用jQuery each() .

(感谢 Rory 提供 randomFromTo 函数!)

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));
});

享受吧!