如何在对话框显示中将回调附加到jquery效果？

Question

我的问题是我不知道如何将回调附加到jquery ui对话框节目.

该节目实际上是一个选项:

$( ".selector" ).dialog({ show: 'slide' });

我希望在幻灯片动画完成后进行回调.我从效果本身看,他们有一个回调:

effect( effect, [options], [speed], [callback] )

但是在对话框中,效果的设置方式却截然不同.我也尝试过:

$( ".selector" ).dialog({ show: 'slide', callback: function() {} });

但它没有用.

建议？

Answer 1

更新2015-07-27对于使用jQuery v1.10.0或更高版本的任何人,请参阅其他答案,因为我的解决方案不适用于较新版本的jQuery.

原始答案

已经回答了,但既然我得到了答案,我还是会发布它...

$('#dialog').dialog({
    show: {
        effect: 'slide',
        complete: function() {
            console.log('animation complete');
        }
    },
    open: function(event, ui) {
        console.log('open');
    }
});

在控制台中显示open后跟animation complete

Answer 2

两年后,建议的解决方案(由@andyb)不再适用于当前版本的jQuery UI(特别是自v1.10.0以来).他的解决方案依赖于complete回调方法 - 一种未记录的功能.

我已经想出了一个使用jQuery Promise对象的最新解决方案:

$("#dialog").dialog({
    show: {
        effect: "drop",
        direction: "up",
        duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 1000
    },
    open: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Opened");
        });
    },
    close: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Closed");
        });
    }
});

这是通常的JSFiddle演示:http://jsfiddle.net/losnir/jcmpm/