显示效果完成后的jQuery UI Dialog执行功能答案

【问题标题】：jQuery UI Diolog execute function after show-effect is finished显示效果完成后的jQuery UI Dialog执行功能
【发布时间】：2014-03-08 22:40:02
【问题描述】：

我目前正在使用 jQuery 和 jQueryUI 进行编码。我正在使用 jQuery 对话框小部件。 (jQuery API - Dialog Widget)

我正在打开一个对话框并为此使用显示方法，代码是这样的：

$("#dialog").dialog({
    dialogClass: 'myclass',
    height: 'auto',
    width: 'auto',
    modal: true,
    resizable: false,
    draggable: false,
    buttons: [{ text: "Ok", click: function () { $(this).dialog("close"); } }],
    show: { effect: "slide", duration: 1000, direction: "right", finish: function () { $(".myclass.ui-dialog").css("position", "fixed"); console.log("done after effect"); } },
    position: { my: "right top", at: "right top", of: window },
});

重要的部分是那里的show:。除了“完成”参数外，所有这些都在工作。这个show效果完成后有没有其他方法可以添加功能？

我只想固定我的对话框，以便在滚动时它保持在原来的位置。我试图覆盖css类并且它可以工作，但是在效果运行时，显示被破坏（显示在左侧而不是右侧）并且在它之后它是正确的，所以我想尝试在效果之后添加它.

那么，有什么好办法吗？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog effect

【解决方案1】：

look here 第二个答案，因为第一个不再工作了

open: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Opened");
    });
}

【讨论】：

您的解决方案有点延迟。（我认为是因为它会监听事件？）它在一秒钟之内，但有时是感觉的。但对我来说应该不是问题，你的方式要好得多（：谢谢。

【解决方案2】：

啊，我自己找到了解决方案。也许这只是一种解决方法，但它确实有效。

我在对话框中添加了选项autoOpen: false,，并在对话框创建过程中添加了以下几行：

$("#dialog").dialog('open');
$(".achievement_dialog.ui-dialog").wait(1000, function () { $(this).css("position", "fixed"); console.log("done after effect"); });

方法 wait() 是我为等待函数创建一次的自编码 jQuery 函数：

$.fn.wait = function (timeout, callback) {
    /// <summary>
    ///     Timeout for animations or show/hide-effects. Put the functions that should be executed after it in the callback function,
    ///     if they are no animations (or the won't wait).
    /// </summary>
    /// <param name="timeout" type="int">Time in miliseconds to wait</param>
    /// <param name="callback" type="Function">A function to execute after the time</param>
    /// <returns type="jQuery" />
    if (typeof timeout == 'undefined')
        timeout = 1000;
    $(this).animate({ opacity: 1.0 }, timeout, callback);
    return this;
};

如果我使用与显示动画时间相同的等待时间，这对我有用。但我会看看 JohnnyAWs 的回答。听起来更好。

【讨论】：