为什么模态淡出不慢？

Question

我继承了这个modal/overlay/contentclose/empty有效的方法，但是突然：

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');
};

Answer 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();
                });
            });
        });
    });
});

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

Answer 2

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

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

为什么模态淡出不慢？

Why Doesn't Modal FadeOut Slowly?

javascript

jquery

modalviewcontroller