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

Question

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

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

我试图添加一个transform属性，但它似乎不起作用。有什么解决办法吗？ 小提琴

Answer 1

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

$(".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 插件进行旋转，可以在这里找到。