Question

我继承了这个模态/覆盖/内容关闭/空方法，但突然之间：

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元素在display: none动画后也会有fadeOut。我希望您忘记在模态$content.show()方法中添加open。

为什么模态FadeOut没有慢慢？

2 个答案: