我动画一些CSS样式,这样的:我如何在jQuery中实现旋转动画?
$(".left").animate({
left: '300px',
width: '300px',
height: '300px',
top: '25px'
}, 1000,'easeInOutQuint', function() {
});
我尝试添加一个transform
属性,但它似乎并没有工作。任何解决方案 Fiddle
我动画一些CSS样式,这样的:我如何在jQuery中实现旋转动画?
$(".left").animate({
left: '300px',
width: '300px',
height: '300px',
top: '25px'
}, 1000,'easeInOutQuint', function() {
});
我尝试添加一个transform
属性,但它似乎并没有工作。任何解决方案 Fiddle
最佳的解决方案,并在我的情况下工作,用一个小jQuery插件,可以发现here旋转的一个。
您需要报价添加到转换属性,如:
$(".left").animate({
'-webkit-transform': 'rotate(180deg)',
'-moz-transform': 'rotate(180deg)',
'-ms-transform': 'rotate(180deg)',
'-o-transform': 'rotate(180deg)',
'transform': 'rotate(180deg)'
});
编辑:我测试了这一点,并发现它不能正常工作。大概jQuery不支持“动画”功能中的CSS3标签。除非别人有更好的主意,否则你可能需要一个插件。要做到这一点
一种方法是添加不使用诸如文本缩进一个属性,然后增加它的价值。为css类'.last'中的文本缩进设置一些值。检查下面的代码示例。
$('.left').animate({
left: '300px',
width: '300px',
height: '300px',
top: '25px',
textIndent: '0px'
},
{
step:function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
});
希望这可以解决您的问题。或者你可以简单地使用css3动画属性。
为什么文本缩进? – 2013-02-11 09:21:54
你可以使用任何一劫财产。例如z-index。但是这不会支持负面价值。或者你不想在z-index中使用负值 – GBRocks 2013-02-11 09:54:08
由于某种原因,这是行不通的。细节中我添加了一个小提琴来解答我的问题。 – 2013-02-11 09:17:03
是我测试,它无法正常工作。这只是从我的头顶开始。它可以与.css({})一起工作,但它当然不会生成动画。有趣太看到一个很好的解决方案 – reinder 2013-02-11 09:18:04