jQuery fadeIn flash dans Firefox

Question

J'ai une superposition qui couvre l'écran avec une fenêtre modale qui apparaît au-dessus. Avec le code actuel ci-dessous, je reçois un éclair dans Firefox avant que la fenêtre de modalité et la fenêtre modale n'apparaissent. Y a-t-il un moyen de se débarrasser du flash? J'ai besoin d'attendre que le fondu soit complètement terminé avant d'être visible mais je ne sais pas comment.

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

Je pense que la question est de la fadeout arrive à ralentir si vous voyez le flash de superposition lorsque j'exécute le code $ ("# overlay") css ("visibilité", "visible").

Toute aide est appréciée pour la recherche.

Answer 1

À l'heure actuelle, il semble que votre JS dépend de la file d'attente d'animation de jQuery, mais que les commandes CSS de visibilité vont se déclencher avant la fin du fadeOut. Si vous voulez simplement le modifier afin que la visibilité soit définie sur "visible" lorsque le fadeOut est terminé, utilisez un callback d'achèvement.

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

Je suis un peu curieux de savoir pourquoi vous voulez avoir une durée de 0ms. Y a-t-il une raison pour laquelle vous ne pouvez pas simplement définir #overlay et #modalWindow pour afficher: none dans votre fichier CSS, puis simplement appeler .fadeIn sur eux sur document prêt? En supposant que est une option qui vous permettra d'appeler simplement votre fadeIn comme si

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

Answer 2

Compte tenu de votre explication, je pense que c'est ce que vous voulez:

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

Cependant, compte tenu de la façon dont vous êtes dans cette fenêtre modale, pourquoi la propriété visibility est-elle définie? display: none devrait cacher la boîte de dialogue Modal très bien.

En fait, si vous avez seulement besoin de soutenir les navigateurs modernes, une fenêtre modale est très facile à créer, comme dans cette simple démo ici: http://jsfiddle.net/yijiang/X3vqu/1/