title: High CPU Usage with JQuery Animation
body: <p>I found a jQuery script online that creates multiple span elements below the viewport (each containing the same small animated gif) and moves each of these to the top of the page at different speeds and then repeats the loop over and over.</p>
  
  <p>Currently this uses about 10% of my processor time. Is there anyway to reduce this CPU usage even further? I have reduced the number of span elements, but this didn't help very much.</p>
  
  <p>I read about setting <code>setInterval</code>, which I have done and it helped somewhat, but I still believe it is too high for what I believe is a simple animation.</p>
  
  <pre><code>var easings=[]
  $.each($.easing,function(i,v){
      if ($.isFunction(v))
          easings.push(i)
  })
  function randomEasing(){
      return easings[Math.floor(Math.random()*easings.length)]
  }
  function cloud(x,y,toX,toY,speed){
      var easingUp=randomEasing()
      $('&lt;span class="cloud"&gt;')
      .text(easingUp)
      .css({
          top:y,
          left:x
      })
      .animate({
          top:toX,
          left:toY
      },{
          duration:speed||500,
          complete: function(){
              $(this).remove();
              cloud(x,y,toX,toY,speed)
              },
          specialEasing: {
              top: easingUp,
              height: randomEasing()
          }
      })
      .appendTo('body')
  }
  function randy(from,to){
      return  Math.floor(Math.random()*(to-from)+from)
  }
  $(function(){
      var bottom=$(window).height()+90
      var right=$(window).width()-200
      for(var left=50;left&lt;right;left+=50){
          cloud(left,bottom+90,-70,"-="+randy(-10,10),randy(10000,24000))
      }
  })
  jQuery.fx.interval = 60;
  </code></pre>
  
  <p>Is there anything else I can do to reduce CPU usage, or is this the best I can do with jQuery and should be looking at other solutions? </p>