1

可能重复：
jQuery：如何为 div 旋转设置动画？

我有一个 div，当您单击它时，我希望它围绕中心点平滑旋转 30 度。我搜索了一堆，但没有找到任何我可以开始工作的东西。到目前为止，这是我尝试过的-我一生都无法弄清楚自己做错了什么。

$("#box").click(function() {
    $(this).animate({
        rotate: '30deg'
    }, 1000);
});​

这是一个例子：jsFiddle

这看起来很简单，我可能会因为问而被活生生吃掉，但我真的坚持这一点。谢谢你的帮助。

4

2 回答 2

3

使用jQuery Rotate 插件- 它是合理的跨浏览器。

$("#box").rotate({ 
    angle:0,
        bind: {
            click : function(){
                var curAngle = parseInt($(this).getRotateAngle());
                $(this).rotate({
                    angle: curAngle,
                    animateTo: curAngle + 30
                });
            }
        }
   });

​演示 ：http: //jsfiddle.net/svz2J/6/

正如下面评论中的要求 - 一种通过按钮执行此操作的方法。另外，添加了一个duration例子。

$("button").click(function(){ 
    var curAngle = parseInt($("#box").getRotateAngle()) || 0;
    $("#box").rotate({
        angle: curAngle,
        animateTo: curAngle + 30,
        duration: 5000
    });
});

​</p>

演示：http: //jsfiddle.net/svz2J/10/

于 2012-06-12T23:07:00.763 回答
1

我真的建议你改用这个插件： http ://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

我在一个项目上建议的 ahren 花了很长时间，但由于性能不佳而最终不得不更换。

如果它是一个相对较低的过程密集型的事情，那么就足够公平了.. 只是想我会权衡一下。

于 2012-06-12T23:12:23.873 回答