我们如何在 jquery 中添加 css + 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5029035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do we add css + animation in jquery?
提问by Adam Ramadhan
Here is a little snippet of what I'm trying to do:
这是我正在尝试做的一些小片段：
$('#why-red a').hover(function() {
$(this).animate({ -webkit-transform: 'scale(1.1)' }, 'slow');
}, function() {
$(this).animate({ -webkit-transform: 'scale(1)' }, 'slow');
});
This could be done with CSS:
这可以用 CSS 来完成：
// image
#effect a:hover{
text-decoration:none;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 4;
}
and it works. However, in WebKit, on hover, it gets bigger slowly, unlike in Firefox, or IE where the images grow big instantly.
它有效。但是，在 WebKit 中，在悬停时，它会慢慢变大，这与 Firefox 或 IE 中的图像会立即变大不同。
It would be nicer if we could have something like:
如果我们可以有这样的东西会更好：
#why-red a{
-webkit-transition: .15s linear;
}
How can we add transition effects or to scale not just for Webkit, but for IE, Firefox, etc.
我们如何不仅为 Webkit，而且为 IE、Firefox 等添加过渡效果或缩放？
Update: I received a great sample on how to do something like this from a good guy in jQuery IRC.
更新：我从 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, , , , , , ) {
return 'matrix(' + [val, , , val, , ].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);
});
For now, this is a good solution, but do any of you have even better ideas?
目前，这是一个很好的解决方案，但你们有没有更好的想法？
回答by David Tang
You can't use jQuery's .animate()in conjunction with CSS transforms, at least without a plugin, since the scale()part is non-numeric and would confuse it.
您不能将 jQuery.animate()与 CSS 转换结合使用，至少在没有插件的情况下，因为该scale()部分是非数字的并且会混淆它。
However, you don't actually need jQuery at all for the effect you're after. You can combine -webkit-transformwith -webkit-transition(and -mozand -oequivalents) to animate transforms directly in CSS. For example:
但是，您实际上根本不需要 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);
}
(See: http://www.the-art-of-web.com/css/css-animation/)
（见：http: //www.the-art-of-web.com/css/css-animation/）
If you'd like you may be able to the apply the CSS via jQuery's .css()on hover, but this is not needed. Or if you would like to apply css transitions using jquery:
如果您愿意，您可以.css()在悬停时通过 jQuery 应用 CSS ，但这不是必需的。或者，如果您想使用 jquery 应用 css 转换：
$('#why-red a').css({
'-webkit-transform': 'scale(1.1)',
'-moz-transform': 'scale(1.1)',
'-o-transform': 'scale(1.1)'
});
回答by wildpeaks
If you wish .animate()used transitions automatically when available (and fallback to regular animation otherwise), you should check out "Enhancing jQuery's animate function to automatically use CSS3 transitions".
如果您希望.animate()在可用时自动使用过渡（否则回退到常规动画），您应该查看“增强 jQuery 的动画功能以自动使用 CSS3 过渡”。
Github repositoryof the plugin.
插件的Github 存储库。
回答by p4tch
Another option to those mentioned above is Transit JS.
上面提到的另一种选择是 Transit JS。
Using transit js you can call...
使用transit js，您可以调用...
$('.className').transition({ scale: 1.0, duration: 400 });
Transit JS: http://ricostacruz.com/jquery.transit/
回答by kifka
i know this question was asked years ago, but i have found a solution for a similar problem, so i have decided to share.
i have used @-webkit-keyframesto create 2 animations. one with .mouseoverand one with .mouseout.
combining with .addClassand .removeClassI have managed to make this work.
我知道这个问题是多年前被问到的，但我找到了类似问题的解决方案，所以我决定分享。我曾经@-webkit-keyframes创建过 2 个动画。一个.mouseover和一个.mouseout。相结合.addClass和.removeClass我设法使这项工作。
see example in jsFiddle
请参阅jsFiddle 中的示例
or this snippet code:
或这个片段代码：
$('#why-red a').mouseover(function() {
$(this).addClass("scaleAnimation")
.removeClass("downScaleAnimation")
.css("-webkit-transform","scale(1.1)");
})
$('#why-red a').mouseout(function() {
$(this).removeClass("scaleAnimation").
addClass("downScaleAnimation")
.css("-webkit-transform","scale(1)");
})@-webkit-keyframes scaleAnim {
0% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-webkit-keyframes downScaleAnim {
0% {-webkit-transform: scale(1.1);}
100% {-webkit-transform: scale(1);}
}
.scaleAnimation{
animation: scaleAnim 1s;
animation-iteration-count: 1;
}
.downScaleAnimation{
animation: downScaleAnim 1s;
animation-iteration-count: 1;
}
#why-red a{position:absolute;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="why-red">
<a href="#">why-red a</a>
</div>回答by Bindas
see the Demos of Jquery having great source.
请参阅具有很好来源的 Jquery 演示。
http://jqueryui.com/demos/toggleClass/
http://jqueryui.com/demos/toggleClass/
Color Animation Class Animation Show Hide
彩色动画类动画显示隐藏
Just on the fly..
只是在飞行..
