jquery设置html动画,我们如何在jquery中添加css动画？

这是我正在尝试做的一小部分：

$('#why-red a').hover(function() {

$(this).animate({ -webkit-transform: 'scale(1.1)' }, 'slow');

}, function() {

$(this).animate({ -webkit-transform: 'scale(1)' }, 'slow');

});

这可以用CSS完成：

// image

#effect a:hover{

text-decoration:none;

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

z-index: 4;

}

它的工作原理.然而,在WebKit中,在悬停时,它变得越来越慢,不像Firefox或IE中的图像立即变大.

如果我们能有这样的东西会更好：

#why-red a{

-webkit-transition: .15s linear;

}

我们如何添加转换效果或扩展不仅适用于Webkit,还适用于IE,Firefox等.

更新：

我收到了一个关于如何从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);

});

目前,这是一个很好的解决方案,但你们中的任何人都有更好的想法吗？