title: scale images using jquery animate method
body: <p>I want to scale images using jquery as css3 transform doing.
  so i wrote a script here it is</p>
  
  <pre><code> (function(){
      $('.img_container img').on('mouseover',function(){
          var $this = $(this),
              width = $this.attr('width'),
              height = $this.attr('height'),
              new_width = (width + 10)+'px',
              new_height = (height + 10)+'px';
  
          $this.animate({'width':new_width,
                         'height':new_height,
                         'top':'-10px',
                         'left':'-10px'},{
                             duration:300,
                             });
          });
      })();
  </code></pre>
  
  <p>mouse over on the images increases there width and height more than 10px and unusually
  any help please</p>
  
  <p>i able to write another script.</p>
  
  <pre><code>(function(){
      var factor = 15;
  
  $('.img_container img').on('mouseover',function(){
  
          var $this = $(this),
          height = $this.height(),
          width = $this.width();
      $(this).animate({
          top:  height - factor,
          left:  width - factor,
          width: width + factor,
          height: height +factor
      },200);
  });
  $('.img_container img').on('mouseleave',function(){
  
          var $this = $(this),
          height = $this.height(),
          width = $this.width();
      $(this).animate({
          top:  height + factor,
          left:  width + factor,
          width: width - factor,
          height: height - factor
      },200);
  });
  
  })();
  </code></pre>
  
  <p>However, if i move the mouse in and out of the image several times
  really fast, the image will "throb" because it catches each event and
  can't show them fast enough. It's like a delay of animation.how to fix this.</p>