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

Question

我可以用css和jquery .rotate旋转一个div,但我不知道如何动画它.

Answer 1

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

如果你也想支持IE,你将不得不考虑使用canvas像我相信拉斐尔那样的.

这是一个简单的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" />

Answer 2

如果您正在为iOS设备或webkit进行设计,那么您可以在没有任何JS的情况下进行设计:

CSS:

@-webkit-keyframes spin {  
from {  
    -webkit-transform: rotate(0deg);  
}  
to {  
    -webkit-transform: rotate(360deg);  
    } 
}

.wheel {
    width:40px;
    height:40px;
    background:url(wheel.png);
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3s; 
}

这将在加载时触发动画.如果你想在悬停时触发它,它可能如下所示:

.wheel {
    width:40px;
    height:40px;
    background:url(wheel.png);
}

.wheel:hover {
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s; 
}

Answer 3

我一直在用

$.fn.rotate = function(degrees, step, current) {
    var self = $(this);
    current = current || 0;
    step = step || 5;
    current += step;
    self.css({
        '-webkit-transform' : 'rotate(' + current + 'deg)',
        '-moz-transform' : 'rotate(' + current + 'deg)',
        '-ms-transform' : 'rotate(' + current + 'deg)',
        'transform' : 'rotate(' + current + 'deg)'
    });
    if (current != degrees) {
        setTimeout(function() {
            self.rotate(degrees, step, current);
        }, 5);
    }
};

$(".r90").click(function() { $("span").rotate(90) });
$(".r0").click(function() { $("span").rotate(0, -5, 90) });

span { display: inline-block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span>potato</span>

<button class="r90">90 degrees</button>
<button class="r0">0 degrees</button>

Answer 4

如果你只想要一个jQuery选项,这将有效:

$(el).stop().animate(
  {rotation: 360},
  {
    duration: 500,
    step: function(now, fx) {
      $(this).css({"transform": "rotate("+now+"deg)"});
    }
  }
);

这适用于jQuery 1.8,它自动处理CSS前缀.jQuery没有动画旋转,所以我把它transform:rotate()放在自定义step函数中.它可能只能从0开始工作.

演示:http://jsfiddle.net/forresto/ShUgD/

IE9和Mobile Safari 4支持CSS转换但不支持CSS转换,因此我使用Modernizr功能测试提出了这个简单的垫片:

if (Modernizr.csstransitions) {
  $(el).css({
    "transition": "all 500ms ease-in-out"
  });
}

$(el).click(function(){
  var rotateTo = 360;
  if (Modernizr.csstransitions) {
    $(el).css({"transform": "rotate("+rotateTo+"deg)"});
  } else {
    $(el).stop().animate(
      {rotation: rotateTo},
      {
        duration: 500,
        step: function(now, fx) {
          $(this).css({"transform": "rotate("+now+"deg)"});
        }
      }
    );
  }
});

以上将在可用时使用CSS转换.