Superposition jQuery très simple

Question

Je crée un site fixe d'une page qui déploie une superposition à l'aide de jQuery. Il y a deux éléments qui composent la superposition:

• #-recouvrement transparent - une div qui couvre toute la fenêtre du navigateur
• # about-emballage - un pop-up div affiché dans le centre de la fenêtre du navigateur , contenant du texte

ces deux divs sont cachés sur chargement de la page et ont une opacité: 0.

ces deux lignes de commutateur jQuery sur la superposition:

$('#transparent-overlay').show().fadeTo(200, 0.5); 
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0); 

Actuellement, je ne sais pas comment assembler le jQuery qui va désactiver la superposition, c'est-à-dire renvoyer ces éléments à l'état dans lequel ils se trouvaient au chargement de la page - quelqu'un a-t-il des idées?

Modifier la suggestion de Karim ci-dessous:

Le fichier .js se lit maintenant comme suit:

$(document).ready(function() { 
    about_click(); 
    about_close(); 
}); 

function about_click() { 
    $('#about').click(function() { 
     $('#transparent-overlay').show().fadeTo(200, 0.5); 
     $('#about-wrapper').delay(200).show().fadeTo(170, 1.0); 
    }); 
} 

function about_close() { 
    $('#about-close').click(function() { 
     $('#about-wrapper').hide(); 
     $('#transparent-overlay').fadeOut(200); 
    }); 
} 

Cette charge la superposition parfaite, puis se cache parfaitement. Cependant, quand je vais recharger l'overlay, # over-wrapper et # transparent-overlay se réinstallent au lieu de - dans le cas de # overlay transparent - en fondu.

Quelle est la meilleure façon pour y remédier, s'il vous plaît?

Answer 1

Vous faites simplement le contraire de ce que vous avez fait. Incluez le masquage des éléments dans une fonction de rappel afin que le fondu fonctionne au préalable.

$('#about-wrapper').hide().fadeTo(0, 0); 
$('#transparent-overlay').fadeTo(200, 0, function(){ 
    $(this).hide(); 
}); 

Answer 2

Que diriez-vous:

$("#about-wrapper").hide(); 
$("#transparent-overlay").fadeOut("slow"); 

Answer 3

Si vous le souhaitez, vous pouvez utiliser des événements personnalisés pour encapsuler le cacher/révéler de la superposition, puis les déclencher à l'aide des contrôles sur votre page. Par exemple:

$(document).bind("overlay-reveal", function() { 
    $('#transparent-overlay').show().fadeTo(200, 0.5); 
    $('#about-wrapper').delay(200).show().fadeTo(170, 1.0); 
}).bind("overlay-close", function() { 
    $('#about-wrapper').hide(); 
    $('#transparent-overlay').fadeOut(200); 
}); 

$(".closeOverlay").click(function() { 
    $(document).trigger("overlay-close"); 
}); 

$(".showOverlay").click(function() { 
    $(document).trigger("overlay-reveal"); 
});