title: Rotating Testimonial
body: <p>I'd appreciate some help in fixing this little testimonial box of mine. Now, I don't know if the problem is the PHP, CSS, or just my markup, because the although the posts seem to fade, they all appear at once and the first fade just goes on to show the third post.</p>
  
  <p>Here's the script:</p>
  
  <pre><code>    &lt;script language="javascript"&gt; 
  jQuery(document).ready(function(){
      jQuery('#testimonials .slide');
      setInterval(function(){
          jQuery('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
              if(jQuery(this).next('.slide').size()){
                  jQuery(this).next().fadeIn(1000);
              }
              else{
                  jQuery('#testimonials .slide').eq(0).fadeIn(1000);
              }
          });
      },1500);    
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>PHP/HTML:</p>
  
  <pre><code>&lt;?php 
    $loop = new WP_Query(array('post_type' =&gt; 'qcamp', 'posts_per_page' =&gt; 5)); 
    if ($loop-&gt;have_posts()) { ?&gt;
  &lt;div id="camps-quote"&gt;
  
  &lt;?php while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post(); ?&gt;
  
      &lt;div id="testimonials"&gt;
          &lt;div class="slide"&gt;
              &lt;div class="testimonial-quote"&gt;
              &lt;?php the_content(); ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;?php endwhile; ?&gt;  
  
  &lt;/div&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>and finally the CSS:</p>
  
  <pre><code>#camps-quote {
      margin-top:50px;
      box-shadow: 7px 7px 7px #C0C0C0; 
      background-color: #7D9EC0; 
      height: 120px; 
      font-size: 16px;
      padding:7px;
      font-family: Arial;
      width:500px;
      margin-left:200px;
      overflow:hidden;
  }
  
  #testimonials{
  
  }
  
  #testimonials .slide {color: #fff;}
  
  #testimonials .testimonial-quote {
      padding: 3px 0 0 65px; 
      line-height: 1.5em; 
      font-family:Helvetica, Arial, sans-serif !important; 
      font-size: 16px; 
      font-weight: normal; 
      font-style: italic; 
      margin: 10px 0 20px 0;
  }
  </code></pre>
  
  <p><a href="http://www.botkai.com/camps-page/" rel="nofollow">Here's the site I'm testing it on.</a></p>