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

즐기십시오!