jQuery:如何为 div 旋转设置动画？

Question

我可以使用 css 和 jquery .rotate 旋转 div，但我不知道如何为其设置动画。

Answer 1

利用WebkitTransform/-moz-transform:rotate(Xdeg)。这在 IE 中不起作用，但 Matt 的 zachstronaut 解决方案在 IE 中也不起作用。

如果您也想支持 IE，则必须考虑使用 canvas，就像我相信的 Raphael does 。

这是一个简单的 jQuery 片段，用于旋转 jQuery 对象中的元素。可以开始和停止旋转:

$(function() {
    var $elie = $("img"), degree = 0, timer;
    rotate();
    function rotate() {
        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },5);
    }
    
    $("input").toggle(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="button" value=" Toggle Spin " />
<br/><br/><br/><br/>
<img src="http://i.imgur.com/ABktns.jpg" />