jQuery исчезает во Flash в Firefox - PullRequest
Новая
       7

jQuery исчезает во Flash в Firefox

2 голосов
/ 17 ноября 2010

У меня есть оверлей, который закрывает экран модальным окном, которое появляется над ним.С текущим кодом ниже я получаю вспышку в 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");

Любая помощь приветствуется, спасибо за поиск.

Ответы [ 2 ]

0 голосов
/ 17 ноября 2010

Учитывая ваше объяснение, я думаю, это то, что вы хотите : 

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

Однако, учитывая то, как вы исчезаете в этом модальном окне, почему свойство visibility вообще установлено? display: none должно просто скрывать модальное диалоговое окно.

На самом деле, если вам нужна только поддержка современных браузеров, тогда модальное окно очень легко создать, как в этой простой демонстрации: http://jsfiddle.net/yijiang/X3vqu/1/

0 голосов
/ 17 ноября 2010

В данный момент похоже, что ваш JS зависит от очереди анимации jQuery, но CSS-команды видимости будут срабатывать до завершения fadeOut. Если вы хотите просто изменить его, чтобы видимость была установлена ​​на «видимый» после завершения fadeOut, используйте обратный вызов завершения. 

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

Мне немного любопытно, почему вы хотите, чтобы длительность 0 мс затухала. Есть ли какая-то причина, по которой вы не можете просто настроить отображение #overlay и #modalWindow: ничего в вашем CSS-файле, а затем просто вызвать .fadeIn для них в готовом документе? Предполагая, что это опция, которая позволит вам просто вызывать ваш fadeIn, вот так: 

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