这是我正在尝试做的一小段:
$('#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);
});
目前,这是一个很好的解决方案,但你们有没有更好的想法?
最佳答案
您不能将 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)'
});
关于jquery - 我们如何在 jquery 中添加 css + 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5029035/