Question

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

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

享受！

Answer 2

试试这个：

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

它在开头定义了一个数组，其中包含您想要选择的所有可能的jQuery UI效果。然后它选择一个随机的并将其设置为hide的{{1}}参数。

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

2 个答案: