title: Simple jquery slideshow causing High CPU Usage
body: <p>So I decided to use a simple 1-line jquery content slider instead of opting for bloated plugins. I'm using <a href="http://daneden.github.io/animate.css/" rel="nofollow">animated.css</a> for text fade ins apart from the jquery for fading in/out slides.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="student-blocks"&gt;
      &lt;div&gt;
          &lt;h2 class="animated fadeUp"&gt;News Item #1&lt;/h2&gt;
          &lt;p "animated fadeIn"&gt;lorem&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2 class="animated fadeUp"&gt;News Item #2&lt;/h2&gt;
          &lt;p "animated fadeIn"&gt;lorem&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2 class="animated fadeUp"&gt;News Item #3&lt;/h2&gt;
          &lt;p "animated fadeIn"&gt;lorem&lt;/p&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(function ()
  {
  
      $("#student-blocks &gt; div:gt(0)").hide();
  
      setInterval(function ()
      {
          $('#student-blocks &gt; div:first')
          .hide()
          .next()
          .fadeIn()
          .end()
          .appendTo('#student-blocks');
      }, 4000);
  });
  </code></pre>
  
  <p><strong><em>PAGE IS HOSTED HERE: <a href="http://cloud69.comoj.com/pages/" rel="nofollow">http://cloud69.comoj.com/pages/</a></em></strong></p>
  
  <p><strong>The Problem</strong></p>
  
  <p>This slideshow causes my CPU usage to shoot up to 15% to 20%. I tried collecting a CPU profile, and saw spikes at regular time intervals (maybe when slides are changing).</p>
  
  <p>Why is the CPU usage so high?  How do I make it better?</p>