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命令将在fadeOut完成之前触发。如果您只想更改它，以便在完成fadeOut时将可见性设置为“可见”，请使用完成回调。

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

我有点好奇为什么你想要0ms的持续时间fadeOut。有没有理由为什么你不能只在你的CSS文件中设置#overlay和#modalWindow来显示：none，然后在文档就绪时调用.fadeIn？假设这是一个允许你像这样调用你的fadeIn的选项

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

Answer 2

鉴于您的解释，我认为这是您想要的：

$('#overlay, #modalWindow').hide().css('visibility', 'visible').fadeIn();

但是，考虑到你在这个模态窗口中消失的方式，为什么要设置visibility属性呢？ display: none应该隐藏模态对话框。

事实上，如果您只需要支持现代浏览器，那么模拟窗口非常很容易创建，就像在这个简单的演示中一样：http://jsfiddle.net/yijiang/X3vqu/1/

在Firefox中使用jQuery fadeIn flash

2 个答案: