Change z-index after opacity change

Change z-index after opacity change

Hey guys,

I'm super new to jQuery and JS in general, so this question is what I imagine to be incredibly basic but I really don't know where to start. 

Basically, my current code is like this:

  1. <script type="text/javascript">
  2. $(document).ready(function(){ 
  3. $('#contentblind').css('opacity', '1').fadeTo(3500, 0);
  4. });
  5. </script>
It works fine aesthetically (I basically needed to create a fade-in effect for the content, but when fading the content itself my @font-face font looked like shit during the transition, so I just put this "contentblind" div as an overlay on top of the content to fade out). The problem is, even though it's opacity is 0, it's z-index is still over everyone else and not letting any links or rollovers work under it. So, my question is, after I execute this fade effect, how can I change the div's z-index to -1?

Thanks so much!