title: jQuery animation on drop down is jerky, slow and unresponsive
body: <p>I have some fairly simple animation on a drop down menu which seems to jerk a hell of a lot and quite often becomes unresponsive. It occurs in Firefox and Internet Explorer.</p>
  
  <p>The jQuery code used:</p>
  
  <pre><code>$(".optionslink").hover(function() { 
          $(".dropdown").stop(true,true);
  
          $(".dropdown").animate({opacity: 100, top: '30px'},200);
          $(".optionslink").css("background-color","#444");
      }, function() { 
          $(".dropdown").animate({top: -$(".dropdown").height(), opacity: 0}, 400);
          $(".optionslink").css("background-color","transparent");
      }
  );
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="optionslink" style="background-color: transparent;"&gt;                                
      &lt;a class="optionslinka" href=""&gt;Options &lt;img alt="" src="/web/resources/graphics/lightdownarrow.gif"&gt;&lt;/a&gt;
      &lt;div class="dropdown" style="opacity: 0; top: -86px;"&gt;  
          Drop down text / links here                         
      &lt;/div&gt;                          
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone offer some advice?</p>