Jquery UIのランダムhideアニメーション

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

はこれを試してみてください：

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

質問者のコメントに応じて、にそれぞれの異なる遷移を追加するソリューションがあります。これには、ホワイトリスト形式であらゆる合理的な移行が含まれます。

重要な部分は、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)); 
}); 

お楽しみください！