fadeIn OK, but how to fadeOut???

fadeIn OK, but how to fadeOut???

Hi guys
I have a problem, I think its quiet, easy to resolve if u know how...
I got to fade in the "div's" the way i want:
   $('dd.mtv').click(function(){
      $('div#sport_kasten').fadeIn("fast");
      $('div#news_kasten').fadeOut("fast");
      $('div#karte_kasten').fadeOut("fast");
   });

Now I want to fade it out by clicking everywhere else in the "wrapper" or "body" except in the one shown "div" (exp. sport_kasten), a little bit lightBox like^^
when I do it like this...
   $('div#wrapper').click(function(){
      $('div#sport_kasten').fadeOut("fast");
   });

...it fades out in the very next moment after fading in
I even know the problem, the "dd" elements are inside the
body/wrapper so on click both conditions are given at same time.
but i dont know a right/working solution...
i think it can work with something like this
   $('EVERYWHERE.EXCEPT.div#sport_kasten').click(function(){
      $('div#sport_kasten').fadeOut("fast");
   });

but I'm not sure and if this are the right way I don't know to syntax this code

I hope u guys can help me...
many thx, have a nice weekend!!

HTML is:

<body>
<div id="wrapper">
   <div id="header"></div>
   <dl id ="list1">
      <dt>SPORTlive</dt>
         <dd class="mtv">SPORTlive</dd>
         <dd class="mtv">SPORTlive</dd>
      <dt>News</dt>
         <dd class="mnews ">Neuigkeiten</dd>
         <dd class="mnews ">Neuigkeiten</dd>
      <dt>aLAcarte</dt>
         <dd class="mcarte">aLAcarte</dd>
         <dd class="mcarte">aLAcarte</dd>
   </dl>
   <div id="footer"></div>
</div>

<div id="fade_elements">
   <div id="sport_kasten"></div>
   <div id="news_kasten"></div>
   <div id="karte_kasten"></div>
</div>   

</body>