我可以旋转一个div与css和jquery .rotate,但我不知道如何动画它。
解决方法
使用WebkitTransform / -moz-transform:rotate(Xdeg)。这不会在IE中工作,但马特的
zachstronaut解决方案不工作在IE。
如果你想支持IE,你必须调查使用画布像我相信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" />