Question

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

Answer 1

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

如果你也想支持IE，你必须考虑使用我相信 Raphael does 的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，那么无论如何都可以这样做：

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转换。

Answer 5

基于Peter Ajtai回答，这是一个小jquery插件，可以帮助其他人。我没有在Opera和IE9上测试，但也应该在这些浏览器上工作。

$.fn.rotate = function(until, step, initial, elt) {
    var _until = (!until)?360:until;
    var _step = (!step)?1:step;
    var _initial = (!initial)?0:initial;
    var _elt = (!elt)?$(this):elt;

    var deg = _initial + _step;

    var browser_prefixes = ['-webkit', '-moz', '-o', '-ms'];
    for (var i=0, l=browser_prefixes.length; i<l; i++) {
      var pfx = browser_prefixes[i]; 
      _elt.css(pfx+'-transform', 'rotate('+deg+'deg)');
    }

    if (deg < _until) {
      setTimeout(function() {
          $(this).rotate(_until, _step, deg, _elt); //recursive call
      }, 5);
    }
};

$('.my-elt').rotate()

Answer 6

这对我有用：

function animateRotate (object,fromDeg,toDeg,duration){
    var dummy = $('<span style="margin-left:'+fromDeg+'px;">')
    $(dummy).animate({
        "margin-left":toDeg+"px"
    },{
        duration:duration,
        step: function(now,fx){
            $(object).css('transform','rotate(' + now + 'deg)');
        }
    });
};

Answer 7

截至目前，您仍然无法使用jQuery 动画旋转，但可以使用CSS3 动画，然后只需使用jQuery添加和删除类以使动画发生。

JSFiddle demo

<强> HTML

<img src="http://puu.sh/csDxF/2246d616d8.png" width="30" height="30"/>

<强> CSS3

img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); transition-duration:0.4s; } .rotate { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition-duration:0.4s; }

<强>的jQuery

$(document).ready(function() { $("img").mouseenter(function() { $(this).addClass("rotate"); }); $("img").mouseleave(function() { $(this).removeClass("rotate"); }); });

Answer 8

我需要旋转一个对象，但有一个回调函数。受John Kern的回答启发，我创造了这个。

function animateRotate (object,fromDeg,toDeg,duration,callback){
        var dummy = $('<span style="margin-left:'+fromDeg+'px;">')
        $(dummy).animate({
            "margin-left":toDeg+"px"
        },
        {
            duration:duration,
            step: function(now,fx){
                $(object).css('transform','rotate(' + now + 'deg)');
                if(now == toDeg){
                    if(typeof callback == "function"){
                        callback();
                    }
                }
            }
        }
    )};

这样做你可以简单地调用对象上的旋转......（在我的情况下，我在一个显示三角形图标上执行它，默认情况下已经旋转到270度并且我正在旋转另一个90度到360度，1000毫秒。最后一个参数是动画结束后的回调。

animateRotate($(".disclosure_icon"),270,360,1000,function(){
                alert('finished rotate');
            });

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

8 个答案: