Aquí es un pequeño fragmento de lo que estoy tratando de hacer:¿Cómo agregamos la animación css + en jquery?
$('#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?
grande, pero parece que su momento para decir: D. –
@ Adam, sí, no hay opción de CSS para IE. Sin embargo, puedes "degradar graciosamente";) –