Simple DIV slideshow

Simple DIV slideshow

Okay, so I'm pretty much the definition of newbie here.. Sorry if I've chosen the wrong forum to post in.

This is meant to be a simple slideshow, so I can show off some customer testimonials. A couple of paragraphs of text and an image, all of which are formatted and positioned in CSS. The changing of the slides works as intended, but during the transition, the text from both divs are visible. The 'old' one appears below the 'new' one for the duration of the fade. This doesn't affect the image inside either div, though.

  1. <script>
  2.       $(function () {
  3.             $('.slideshow div').hide(); // hide all slides
  4.                   $('.slideshow div:first-child').show(); // show first slide
  5.                   setInterval(function () {
  6.                         $('.slideshow div:first-child').fadeOut(500)
  7.                               .next('div').fadeIn(1000)
  8.                               .end().appendTo('.slideshow');
  9.                   },
  10.             3000); // slide duration
  11.       });    
  12. </script>
  1. <div class="slideshow">
  2.       <div id="slide1">
  3.             <p class="quote">Quote One</p>
  4.                 <p class="credit">Person One</p>
  5.              <img src="img/testimonial_1.png">
  6.       </div>
  7.       <div id="slide2">
  8.             <p class="quote">Quote Two</p>
  9.             <p class="credit">Person Two</p>
  10.             <img src="img/testimonial_2.png">
  11.       </div>
  12.       <div id="slide3">
  13.             <p class="quote">Quote 3</p>
  14.             <p class="credit">Person 3</p>
  15.             <img src="img/testimonial_3.png">
  16.       </div>
  17.  </div>

I don't fully understand the semantics of jQuery yet, the code above isn't even mine, but I'd like to know why it's behaving like this and how to fix it. Please tell me if you have a more effective way of achieving the same result. :)

[moderator moved to using jQuery]