CODEWITHSUNDEEP
jquery
Jim
Jim

Reputation: 851

Very simple jQuery overlay

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

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?

Upvotes: 2

Views: 1894

Answers (3)

karim79
karim79

Reputation: 342635

If you like, you can use custom events to encapsulate the hiding/revealing of your overlay, and then trigger them using controls on your page. For example:

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

Upvotes: 1

Zevan
Zevan

Reputation: 10235

How about :

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

Upvotes: 0

munch
munch

Reputation: 6321

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

Upvotes: 3

Related Questions