title: jquery animate jerky - is there a better library for scaling images?
body: <p>I noticed whenever I use jquery animate with long time and small change animation becomes incredibly jerky! The only way to fix this seems to decrease time considerably and scale more. But in some projects this is not possible...</p>
  
  <p>I looked into css transitions. And it didn't provide better results. Animation itself was better, but firefox was horridly jerky and in chrome animation finishes were not quite there with smoothness.</p>
  
  <p>So my question is this, is there any other library with animation engine that can provide smooth scaling of images? or is there a technique that I'm missing?</p>
  
  <p>This is my animation:</p>
  
  <pre><code>$('.item a').mouseover(function(){
      //
          var this_img = $(this).find('.img_grayscale');
          var css_w = parseInt(this_img.attr("width"), 10);
          var css_h = parseInt(this_img.attr("height"), 10);
          // 10% of height and width calc here
          var css_p_w = css_w * 10 / 100;
          var css_p_h = css_h * 10 / 100;
          // 
          var css_top = -(css_p_h / 2);
          var css_left = -(css_p_w / 2);
      //
      this_img.stop().animate({ opacity:1 }, 100, function(){
          this_img.animate({width:css_w + css_p_w, height:css_h + css_p_h, top:css_top, left:css_left}, 1200, "linear");
      });
      //this_img.transitionStop().transition({ opacity:1 }, 100, function(){
      //  this_img.transition({ scale:1.05, rotate:0.02 }, 2500, "ease");
      //});
      //
  }).mouseout(function(){
      //
          var this_img = $(this).find('.img_grayscale');
          var css_w = parseInt(this_img.attr("width"), 10);
          var css_h = parseInt(this_img.attr("height"), 10);
      //
      this_img.stop().animate({ width:css_w, height:css_h, top:"0", left:"0" }, 1200, "linear", function(){
          this_img.animate({ opacity:0 }, 100);
      });
      //this_img.transitionStop().transition({ scale:1 }, 2500, "ease", function(){
      //  this_img.transition({ opacity:0, rotate:0.02 }, 100)
      //});
      //
  });
  </code></pre>
  
  <p>Commented out parts are jquery.transit plugin tests, this plugin provides css3 transitions.</p>
  
  <p>Live example: <a href="http://mac.idev.ge:800/test/" rel="nofollow">http://mac.idev.ge:800/test/</a> (hover images)</p>