Question

我用这个动画一些css样式：

$(".left").animate({
    left: '300px',
    width: '300px',
    height: '300px',
    top: '25px'
}, 1000,'easeInOutQuint', function() {
});

我尝试添加transform属性，但似乎不起作用。有解决方案吗 Fiddle

Answer 1

您需要在transform属性中添加引号，例如：

$(".left").animate({
    '-webkit-transform': 'rotate(180deg)',
    '-moz-transform': 'rotate(180deg)',
    '-ms-transform': 'rotate(180deg)',
    '-o-transform': 'rotate(180deg)',
    'transform': 'rotate(180deg)'
});

编辑：我对此进行了测试，发现它无效。显然jQuery不支持“动画”功能中的CSS3标签。你可能需要一个插件，除非别人有更好的主意。

Answer 2

执行此操作的一种方法是添加未使用的属性（如text-indent），然后增加其值。在css类'.last'中为text-indent设置一些值。请查看以下代码示例。

$('.left').animate({
    left: '300px',
    width: '300px',
    height: '300px',
    top: '25px',
    textIndent: '0px'
},
{
    step:function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    }
});

希望这可以解决您的问题。或者你可以简单地使用css3动画属性。

Answer 3

最好的解决方案，以及在我的情况下工作的解决方案，是使用一个小的jQuery插件进行轮换，可以找到here。

如何在jQuery中实现旋转动画？

3 个答案: