Fade out entire page, except one jquery created div

Fade out entire page, except one jquery created div

Hi,

I am trying to work out how to fade out all of a page except for one div (that is dynamically created within the page). The problem I think is that the div that I want to remain highlighted is contained within the div that I want to fade.

Here is some sample, simplified code to demonstrate what I want to do:
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  4. </head>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.     $('a.fading').click(function() {
  8.         $('#page').fadeTo(400, .2);
  9.         $(this).append('<div class="highlighted">not faded out</div>');
  10.         $('.highlighted').fadeTo(100, 1);
  11.     });
  12. });
  13. </script>
  14. <body>
  15. <div id='page'>
  16. <p>This is the text that should be faded out</p>
  17. <a class='fading'>Click me</a>
  18. </div>
  19. </body>
  20. </html>
In the actual code, the html/jquery is generated by PHP and I do not have the option to have this div outside of the one I want to fade due to the architecture of the code.

How can I achieve the newly created div being 100% opacity, while everything else goes to 20%?

Thanks,

Ben