¿Cómo agregamos la animación css + en jquery?

Question

Aquí es un pequeño fragmento de lo que estoy tratando de hacer:

$('#why-red a').hover(function() { 
    $(this).animate({ -webkit-transform: 'scale(1.1)' }, 'slow'); 
    }, function() { 
    $(this).animate({ -webkit-transform: 'scale(1)' }, 'slow'); 
}); 

Esto se podría hacer con CSS:

// image 
#effect a:hover{ 
    text-decoration:none; 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    z-index: 4; 
} 

y funciona. Sin embargo, en WebKit, en vuelo estacionario, se hace más grande lentamente, a diferencia de Firefox, o IE, donde las imágenes crecen al instante.

Sería mejor si pudiéramos tener algo como:

#why-red a{ 
    -webkit-transition: .15s linear; 
} 

¿Cómo podemos añadir efectos de transición o de escalar no sólo para Webkit, pero para IE, Firefox, etc.

actualización: Recibí una gran muestra sobre cómo hacer algo como esto de un buen tipo en jQuery IRC.

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 && 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); 
}); 

Por ahora, esta es una buena solución, pero ¿alguno de ustedes tiene aún mejores ideas?

Answer 1

No se puede usar jQuery's .animate() junto con las transformaciones CSS, al menos sin un complemento, ya que la parte scale() no es numérica y podría confundirla.

Sin embargo, en realidad no necesita jQuery para el efecto que busca. Puede combinar -webkit-transform con -webkit-transition (y -moz y -o equivalentes) para animar las transformaciones directamente en CSS. Por ejemplo:

#why-red a { 
    -webkit-transition: all .15s linear; 
    -moz-transition: all .15s linear; 
    -o-transition: all .15s linear; 
} 

#why-red a:hover { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -o-transform: scale(1.1); 
} 

(Ver: http://www.the-art-of-web.com/css/css-animation/)

Si desea usted puede ser capaz de aplicar el CSS a través de jQuery de .css() en vuelo estacionario, pero esto no es necesario. O si lo desea aplicar transiciones CSS usando jQuery:

$('#why-red a').css({ 
    '-webkit-transform': 'scale(1.1)', 
    '-moz-transform': 'scale(1.1)', 
    '-o-transform': 'scale(1.1)' 
}); 

Answer 2

ver las demostraciones de Jquery con gran fuente.

http://jqueryui.com/demos/toggleClass/

color Animación Animación Clase Mostrar Ocultar

Justo sobre la marcha ..

Answer 3

Si desea .animate() utilizan transiciones de forma automática cuando esté disponible (y de repliegue a la animación regular de otro modo), se debería verificar "Enhancing jQuery’s animate function to automatically use CSS3 transitions".

Github repository del complemento.

Answer 4

Otra opción para los mencionados anteriormente es Transit JS.

Usando transit js puedes llamar ...

$('.className').transition({ scale: 1.0, duration: 400 }); 

Tránsito JS: http://ricostacruz.com/jquery.transit/