据我所知,基本动画无法为非数字CSS属性设置动画.
I believe you could get this done using a step function and the appropriate css3 transform for the users browser. CSS3 transform is a bit tricky to cover all your browsers in (IE6 you need to use the Matrix filter, for instance).
EDIT:这里有一个在webkit浏览器(Chrome、Safari)中工作的示例:http://jsfiddle.net/ryleyb/ERRmd/
If you wanted to support IE9 only, you could use transform
instead of -webkit-transform
, or -moz-transform
would support FireFox.
The trick used is to animate a CSS property we don't care about (text-indent
) and then use its value in a step function to do the rotation:
$('#foo').animate(
..
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
...