Question

I’m putting together a fixed, one-page site that deploys an overlay using jQuery. There are two elements that make up the overlay:

• #transparent-overlay – a div that covers the entire browser window
• #about-wrapper – a pop-up div displayed in the centre of the browser window, containing text

Both of these divs are hidden on page load and have opacity: 0.

These two lines of jQuery switch on the overlay:

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

I currently can’t work out how to put together the jQuery that will switch off the overlay – i.e., return these elements to the state they were in on page load – anyone got any ideas?

Edit following Karim’s suggestion below:

The .js file now reads as follows:

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

This loads the overlay perfectly, and then hides it perfectly. However, when I go to re-load the overlay, both #about-wrapper and #transparent-overlay snap back in to place rather than – in the case of #transparent-overlay – fading in.

What’s the best way to go about fixing this, please?

Answer 1

You just do the opposite of what you’ve done. Include the hiding of the elements in a callback function so the fade runs beforehand.

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