Firefox 中的 jQuery fadeIn flash

Question

我有一个覆盖屏幕，并在其上方弹出一个模式窗口。使用下面的当前代码，在覆盖层和模式窗口淡入之前，我在 Firefox 中得到了闪光。有没有办法摆脱闪光？我需要等待淡出完全完成才能可见，但我不知道如何。

$(document).ready(function () {
    $('#openButton').click(function () {
        if ($.browser.msie) {
            $("html").css("overflow", "hidden");
        } else {
            $("body").css("overflow", "hidden");
        }

        $('#overlay').fadeOut(0);
        $('#modalWindow').fadeOut(0);
        $("#overlay").css("visibility", "visible");
        $("#modalWindow").css("visibility", "visible");
        $('#overlay').fadeIn('normal');
        $('#modalWindow').fadeIn('normal');
    });
});

我认为问题在于淡出速度变慢，因此当我执行代码 $("#overlay").css("visibility", "visible"); 时，您会看到覆盖闪烁；

感谢您的帮助，感谢您的关注。

Answer 1

现在看起来你的 JS 依赖于 jQuery 的动画队列，但是可见性 CSS 命令将在淡出完成之前触发。如果您想简单地更改它，以便在淡出完成时将可见性设置为“可见”，请使用完成回调。

$('#overlay,#modalWindow').fadeOut(0,function() { $(this).css('visibility','visible'); });

我有点好奇为什么你想要 0 毫秒的淡出持续时间。是否有某种原因导致您不能在 CSS 文件中将 #overlay 和 #modalWindow 设置为 display:none ，然后在文档准备好时简单地对它们调用 .fadeIn ？假设这是一个允许您像这样调用 fadeIn 的选项

$('#overlay,#modalWindow').fadeIn('normal');