adding effects to addClass

adding effects to addClass

Hi,

I am trying to write a background image swapper, which I have got working.
Ideally I would like to add a transition between the classes I am changing.

I am new to jquery, and I thought this would be a simple project to start on, but I just can't get the fade to work.

Please see below for my code:


<script type="text/javascript" language="javascript" src="jquery/jquery-1.3.2.js"></script>

<title>Untitled Document</title>

<script>
$(function() {
                     $('.bg01') .bind('click', function () {
                     $('body') .removeClass ()  .addClass ('background1');
                     $('.background1').fadeIn('slow');
                     return false;
                     });
   
                  $('.bg02') .bind('click', function () {
                     $('body') .removeClass () .addClass ('background2')   ;
                     $('.background1').fadeIn('slow');
   
                     
                     });
   });
</script>



</head>

<body class="background0">
<ul>
<li><a class="bg01" href="#">change bg</a></li>
<li><a class="bg02" href="#">change bg 2</a></li>
</ul>

</body>
</html>



Here is the CSS
@charset "UTF-8";
/* CSS Document */

.background0 {
   background-image:url(../Images/bg-01.jpg);
   width:100%;
   height:100%;
}

.background1 {
   background-image:url(../Images/bg-01.jpg);
   width:100%;
   height:100%;
   }

.background2 {
   background-image:url(../Images/bg-02.jpg);
   width:100%;
   height:100%;
   }


Any help would be greatly appreciated!

Charles