Coffee Bean Coffee Bean - 6 months ago 12
CSS Question

How do I fade an overlaying div out to then increase the opacity of another div behind on-click

So what I want to do is fade an overlaying 'intro' div out on-click, so that the person can access the div underneath. I am no master at jQuery AT ALL, so I really need help with this. My code is:

<!-- OVERLAY INTRO -->
<div class="button animated slideInLeft" id="introbox" style="width:1000px;" align="center">
<h1>Welcome</h1>
<p class="secondaryheadertext">Blah blah blah</p>
<div align="center">
<img title="Cofffee Bean" src="images/cfblogo1.png" id="cfblogo1">
</div>
<!-- UNDERLAYING MAIN BIT -->
<div id="main">
[WHATEVER IS BEHIND GOES IN HERE]
</div>

Answer

you can add a reference to jquery in your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

and then in your script block just add the following code. this is assuming you want to click the introbox to fade.

$(document).ready(function(){
   $('#introbox').on('click', function(){
       $(this).fadeOut('slow');
   });
});