jQuery fadeIn flash in Firefox

2
votes

I have an overlay that covers the screen with a modal window that pops up over it. With the current code below I get a flash in Firefox before the over lay and modal window fade in. Is there a way to get rid of the flash? I need to wait for the fadeout to be completely done before going visible but i am not sure how.

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

I think the issue is from the fadeout happening to slow so you see the overlay flash in when I execute the code $("#overlay").css("visibility", "visible");

Any help is appreciated thanks for looking.

2
jqueryfirefoxfadein

2 Answers

0
votes

Right now it looks like your JS depends on jQuery's animation queue, but the visibility CSS commands are going to trigger before the fadeOut completes. If you want to simply change it so visibility is set to "visible" when the fadeOut is done, use a completion callback.

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

I'm a bit curious why you want to have a 0ms duration fadeOut though. Is there some reason why you can't just set #overlay and #modalWindow to display:none in your CSS file and then simply call .fadeIn on them on document ready? Assuming that's an option that would allow you to just call your fadeIn like so

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

Given your explanation, I think this is what you want:

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

However, given the way in which you're fading in this modal window, why have the visibility property set at all? display: none should hide the Modal dialog box just fine.

In fact, if you only need to support modern browsers, then a modal window is very easy to create, like in this simple demo here: http://jsfiddle.net/yijiang/X3vqu/1/