如何使用jQuery .animate()
旋转元素?我正在使用下面的行,它正在正确地设置不透明度,但这是否支持CSS3转换?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
答案 0 :(得分:93)
据我所知,基本动画无法为非数字CSS属性设置动画。
我相信您可以使用step函数和用户浏览器的相应css3转换来完成此操作。 CSS3转换对于覆盖所有浏览器来说有点棘手(例如,IE6需要使用Matrix过滤器)。
编辑:这是一个适用于webkit浏览器的示例(Chrome,Safari):http://jsfiddle.net/ryleyb/ERRmd/
如果您只想支持IE9,可以使用transform
代替-webkit-transform
,或-moz-transform
支持FireFox。
使用的技巧是为我们不关心的CSS属性(text-indent
)设置动画,然后在步进函数中使用它的值来进行旋转:
$('#foo').animate(
..
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
...
答案 1 :(得分:75)
Ryley's answer很棒,但我在元素中有文字。为了将文本与其他所有内容一起旋转,我使用了border-spacing属性而不是text-indent。
另外,为了澄清一点,在元素的样式中,设置初始值:
#foo {
border-spacing: 0px;
}
然后在动画块中,你的最终值:
$('#foo').animate({ borderSpacing: -90 }, {
step: function(now,fx) {
$(this).css('transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');
在我的情况下,它逆时针旋转90度。
答案 2 :(得分:46)
在我看来,与CSS3 animate
相比,jQuery的transition
有点过度使用,后者在任何2D或3D属性上执行此类动画。我也害怕,将它留给浏览器和by forgetting the layer called JavaScript could lead to spare CPU juice - 特别是当你想要用动画进行爆破时。因此,我喜欢使用样式定义的动画,因为您使用JavaScript定义功能。您注入JavaScript的演示文稿越多,您稍后将面临的问题就越多。
您所要做的就是将addClass
用于您希望设置动画的元素,您可以在其中设置具有CSS transition
属性的类。你只是“激活”动画,它在纯表示层上实现 。
的.js
// with jQuery
$("#element").addClass("Animate");
// without jQuery library
document.getElementById("element").className += "Animate";
可以轻松地remove a class with jQuery或remove a class without library。
的CSS
#element{
color : white;
}
#element.Animate{
transition : .4s linear;
color : red;
/**
* Not that ugly as the JavaScript approach.
* Easy to maintain, the most portable solution.
*/
-webkit-transform : rotate(90deg);
}
html的
<span id="element">
Text
</span>
对于大多数用例来说,这是一种快速方便的解决方案。
当我想实现不同的样式(替代CSS属性)时,我也会使用它,并且希望使用全局.5s动画即时更改样式。我向BODY
添加了一个新类,同时在这样的表单中使用了替代CSS:
的.js
$("BODY").addClass("Alternative");
的CSS
BODY.Alternative #element{
color : blue;
transition : .5s linear;
}
通过这种方式,您可以在动画中应用不同的样式,而无需加载不同的CSS文件。您只需要使用JavaScript来设置class
。
答案 3 :(得分:17)
要添加Ryley和atonyc的答案,您实际上不必使用真正的CSS属性,例如text-index
或border-spacing
,而是可以指定假的CSS属性,例如rotation
或my-awesome-property
。使用不会成为未来实际CSS属性的风险可能是个好主意。
另外,有人问如何同时为其他东西制作动画。这可以照常完成,但请记住,为每个动画属性调用step
函数,因此您必须检查您的属性,如下所示:
$('#foo').animate(
{
opacity: 0.5,
width: "100px",
height: "100px",
myRotationProperty: 45
},
{
step: function(now, tween) {
if (tween.prop === "myRotationProperty") {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
// add Opera, MS etc. variants
$(this).css('transform','rotate('+now+'deg)');
}
}
});
(注意:我在jQuery文档中找不到“Tween”对象的文档;从the animate documentation page有http://api.jquery.com/Types#Tween的链接,这是一个看起来不像的部分你可以在Github here上找到Tween原型的代码。
答案 4 :(得分:6)
只使用CSS过渡:
$(element).css( { transition: "transform 0.5s",
transform: "rotate(" + amount + "deg)" } );
setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );
例如,我将动画的持续时间设置为0.5秒。
注意setTimeout
在动画结束后(500毫秒)删除transition
css属性
为了便于阅读,我省略了供应商前缀。
此解决方案需要浏览器的过渡支持。
答案 5 :(得分:3)
我偶然发现了这篇文章,希望在jQuery中使用CSS转换来获得无限循环动画。这个对我很好。我不知道它有多专业。
function progressAnim(e) {
var ang = 0;
setInterval(function () {
ang += 3;
e.css({'transition': 'all 0.01s linear',
'transform': 'rotate(' + ang + 'deg)'});
}, 10);
}
使用示例:
var animated = $('#elem');
progressAnim(animated)
答案 6 :(得分:1)
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow
function twistMyElem(){
var ball = $('#form');
document.getElementById('form').style.zIndex = 1;
ball.animate({ zIndex : 360},{
step: function(now,fx){
ball.css("transform","rotateY(" + now + "deg)");
},duration:3000
}, 'linear');
}