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

试试这个：

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效果开始的数组。然后它随机选取一个，并将其设置为dialog的hide参数。

Answer 2

按照askers评论的要求，这是一个解决方案，它为每个元素添加一个不同的转换。它包含几乎所有白名单时尚的合理转换。

重要的部分是致电jQuery each()。

（感谢罗里的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)); 
}); 

享受！