Question

可能重复：
jQuery: how do I animate a div rotation?

我有一个div，当你点击它时，我希望绕中心点平滑旋转30度。我搜索了一堆，但没有发现任何我可以上班的东西。这是我到目前为止所尝试的 - 我不能为我的生活弄清楚我做错了什么。

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

这是一个例子：jsFiddle

这看起来很愚蠢，我甚至可能会因为询问而被活活吃掉，但我严重依赖于此。谢谢你的帮助。

Answer 1

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

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

DEMO： http://jsfiddle.net/svz2J/6/

根据以下评论中的要求 - 通过按钮执行此操作的方法。另外，添加了duration示例。

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

DEMO： http://jsfiddle.net/svz2J/10/

Answer 2

我真的建议您使用此插件： http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

我花了很多时间与一个项目建议的人一起度过，并因为表现不佳而最终不得不更换。

如果它是一个相对较低的过程密集的东西，那么公平。只是觉得我很重要。

点击动画旋转DIV

2 个答案: