这是我正在尝试做的一小部分：
$('#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.]+)\)/;
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,val,$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);
});
目前,这是一个很好的解决方案,但你们中的任何人都有更好的想法吗？
解决方法
您不能将jQuery的.animate()与CSS变换结合使用,至少没有插件,因为scale()部分是非数字的并且会使它混淆.
但是,实际上你根本不需要jQuery来实现你所拥有的效果.您可以将-webkit-transform与-webkit-transition(以及-moz和-o等效项)结合使用,直接在CSS中设置变换动画.例如：
#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);
}
(见：http://www.the-art-of-web.com/css/css-animation/)
如果您愿意,您可以通过jQuery的.css()在悬停时应用CSS,但这不是必需的.或者如果您想使用jquery应用css过渡：
$('#why-red a').css({
'-webkit-transform': 'scale(1.1)','-moz-transform': 'scale(1.1)','-o-transform': 'scale(1.1)'
});
