为什么模态不会慢慢淡出？答案

【问题标题】：Why Doesn't Modal FadeOut Slowly?为什么模态不会慢慢淡出？
【发布时间】：2015-05-04 00:00:24
【问题描述】：

我继承了这个可行的模式/覆盖/内容关闭/空方法，但突然：

method.close = function () {
    $modal.hide();
    $overlay.hide();
    $content.empty();
    $(window).unbind('resize.modal');
};

为了逐渐淡出，我修改了如下方法，但是元素被留下，后续点击不会打开加载内容的新模态，只有叠加层：

method.close = function () {
    $modal.fadeOut('slow', function() {
        $(this).hide();
    });
    $overlay.fadeOut('slow', function() {
        $(this).hide();
    });
    $content.fadeOut('slow', function() {
        $(this).empty();
    });
    $(window).unbind('resize.modal');
};

我错过了什么？

更新：解决方案是单个嵌套回调，基于 garryp 的回答，如下所示：

method.close = function() {
    $overlay.fadeOut('slow', function() {
        $overlay.hide();
        $content.empty();
    });
    $modal.hide();
    $(window).unbind('resize.modal');
};

【问题讨论】：

标签： javascript jquery modalviewcontroller

【解决方案1】：

隐藏是异步的；在转换发生时，您在原始代码中的调用不会阻塞，执行会立即移至下一个。您需要使用回调，如下所示：

var me = $(this); //Added to ensure correct this context
$modal.fadeOut('slow', function () {
    me.hide(function () {
        $overlay.fadeOut('slow', function () {
            me.hide(function () {
                $content.fadeOut('slow', function () {
                    me.empty();
                });
            });
        });
    });
});

假设您的其余代码是正确的，这应该确保转换一个接一个地触发。

【讨论】：

你的嵌套回调想法让我走上了正轨，所以我添加了最终解决方案的更新。

【解决方案2】：

首先，您不需要$(this).hide()。 JQuery fadeOut 在渐变动画结束时自动设置display: none（阅读更多：http://api.jquery.com/fadeout/）。

这意味着，在您的情况下，$content 元素在 fadeOut 动画之后也会有 display: none。我希望您忘记在模态open 方法中添加$content.show()。

【讨论】：