jquery - 在 jQuery UI 对话框的 beforeClose 上延迟关闭事件

Question

我有以下代码，在 .in 和 .out 类上运行 CSS 动画。 我的问题是对话框立即关闭，您根本看不到关闭动画的发生。所以在关闭对话框之前我需要大约 500 毫秒的延迟；

$.extend( $.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
        $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    }
});

$confirm.dialog({

    buttons: {

        "ok": {
            text:'Ok',
            click: function() { $(this).dialog('close'); }
        },

        "cancel": {
            text:'Cancel',
            click: function() { $(this).dialog('close'); }
        }
    },

    beforeClose: function(event, ui) {

        $('.ui-dialog').removeClass('in').addClass('out');

    }

}).dialog('widget').appendTo('.dialogWrapper');

我尝试将 return false 添加到 beforeClose 中，然后手动调用 .dialog('close') 函数，但它只是运行无限循环，手动隐藏对话框似乎是浪费代码(更不用说对话框的覆盖层也需要删除)

对于此事，我将不胜感激。

硅。

Answer 1

这是未经测试的，但我想像这样的东西会让你到达你想去的地方？？？

$.extend( $.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
        $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    }
});

$confirm.dialog({

    buttons: {

        "ok": {
            text:'Ok',
            click: function() { closeDialog(this); }
        },

        "cancel": {
            text:'Cancel',
            click: function() { closeDialog(this); }
        }

    }).dialog('widget').appendTo('.dialogWrapper');

function closeDialog(element){
        $(element).removeClass('in').addClass('out');
        $(element).delay(500);
        $(element).dialog('close');
}