title: How do we add css + animation in jquery?
body: <p>Here is a little snippet of what I'm trying to do:</p>
  
  <pre><code>$('#why-red a').hover(function() {
      $(this).animate({ -webkit-transform: 'scale(1.1)'  }, 'slow');  
      }, function() {
      $(this).animate({ -webkit-transform: 'scale(1)' }, 'slow');
  });
  </code></pre>
  
  <p>This could be done with CSS:</p>
  
  <pre><code>// image
  #effect a:hover{
      text-decoration:none;
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      z-index: 4;
  }
  </code></pre>
  
  <p>and it works. However, in WebKit, on hover, it gets bigger slowly, unlike in Firefox, or IE where the images grow big instantly.</p>
  
  <p>It would be nicer if we could have something like:</p>
  
  <pre><code>#why-red a{
      -webkit-transition: .15s linear;
  }
  </code></pre>
  
  <p>How can we add transition effects or to scale not just for Webkit, but for IE, Firefox, etc.</p>
  
  <p><strong>Update</strong>: 
  I received a great sample on how to do something like this from a good guy in jQuery  IRC.</p>
  
  <pre><code>var rmatrix = /matrix\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)/;
  
  jQuery.support.scaleTransformProp = (function() {
      var div = document.createElement('div');
      return div.style.MozTransform === '' ? 'MozTransform' : 
             div.style.WebkitTransform === '' ? 'WebkitTransform' :
             div.style.OTransform === '' ? 'OTransform' :
             div.style.MsTransform === '' ? 'MsTransform' :
             false;
  })();
  
  if (jQuery.support.scaleTransformProp) {
  
      jQuery.cssHooks['scale'] = {
          get: function(elem, computed, extra) {
              var transform = jQuery.curCSS(elem, jQuery.support.scaleTransformProp),
                  m = transform.match(rmatrix);
              return m &amp;&amp; parseFloat(m[1]) || 1.0;
          },
          set: function(elem, val) {
              var transform = jQuery.curCSS(elem, jQuery.support.scaleTransformProp);
              if (transform.match(rmatrix)) {
                  elem.style[jQuery.support.scaleTransformProp]= transform.replace(rmatrix, function(m, $1, $2, $3, $4, $5, $6) {
                      return 'matrix(' + [val, $2, $3, val, $5, $6].join(',') + ')';
                  });
              } else {            
              elem.style[jQuery.support.scaleTransformProp]= 'scale(' + val + ')';
              }
          }
      };
  
      jQuery.fx.step.scale = function(fx) {
          jQuery.cssHooks['scale'].set(fx.elem, fx.now)
      };
  
  }
  
  /*SEMENTARA*/
  $('#why-red a').hover(function() {
      $(this).animate({ 
          'scale' : 1.1
          }, 200);    
      }, function() {
      $(this).animate({ 
          'scale': 1
          }, 200);
  });
  </code></pre>
  
  <p>For now, this is a good solution, but do any of you have even better ideas?</p>