title: Trouble with the jQuery animate function?
body: <p>I needed a simple three slides slider, so instead of using a jQ plugin I hand coded it myself. The code works but the animation occurs in 2-3 frames instead of happening in over 20 frames, except when in IE6 &amp; IE7 where it animates perfectly in 20-30 frames. In all the other browsers(IE8, Firefox, Chrome, Safari, Opera) it animates in a motion which seems like the computer is hanging. If anyone knows why this is happening please lemme know. I don't wanna use a bulky plugin and then style it too.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="fl-left" id="slide-box"&gt;
  &lt;div class="slide" id="slide-1"&gt;
      &lt;img src="images/slider/1.jpg" alt="The Image Description" /&gt;
      &lt;p class="slide-text"&gt;&amp;quot;The Description About The Image/Slide&amp;quot;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="slide" id="slide-2"&gt;
      &lt;img src="images/slider/1.jpg" alt="The Image Description" /&gt;
      &lt;p class="slide-text"&gt;&amp;quot;The Description About The Image/Slide&amp;quot;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="slide" id="slide-3"&gt;
      &lt;img src="images/slider/1.jpg" alt="The Image Description" /&gt;
      &lt;p class="slide-text"&gt;&amp;quot;The Description About The Image/Slide&amp;quot;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#slide-box{
  position:relative;
  width:472px;
  height:192px;
  border-bottom:3px solid #fff;
  overflow:hidden;
  }
  
  .slide{ position:absolute;
  float:left; width:455px;
  overflow:hidden;
  border:1px solid #000;
  margin:8px 8px 0 8px;
  }
  
  .slide img{ float:left; }
  .slide-text{ display:block;
  width: 140px;
  height:132px;
  background:#ecefdc;
  float:left;
  padding: 10px 0px;
  }
  
  #slide-1 { left:0px; }
  #slide-2 { left:467px; }
  #slide-3 { left:934px; }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#slide-but-1').click(function(){
  $('#slide-1').animate({"left": "0px"}, "slow");
  $('#slide-2').animate({"left": "467px"}, "slow");
  $('#slide-3').animate({"left": "934px"}, "slow");
  });
  $('#slide-but-2').click(function(){
  $('#slide-1').animate({"left": "-467px"}, "slow");
  $('#slide-2').animate({"left": "0px"}, "slow");
  $('#slide-3').animate({"left": "467px"}, "slow");
  });
  $('#slide-but-3').click(function(){
  $('#slide-1').animate({"left": "-934px"}, "slow");
  $('#slide-2').animate({"left": "-467px"}, "slow");
  $('#slide-3').animate({"left": "0px"}, "slow");
  });
  </code></pre>