我正在努力创建一个跨浏览器兼容的轮换 (ie9+)，我在 jsfiddle 中有以下代码

$(document).ready(function () { 
    DoRotate(30);
    AnimateRotate(30);
});

function DoRotate(d) {

    $("#MyDiv1").css({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform': 'rotate('+d+'deg)'
     });  
}

function AnimateRotate(d) {

        $("#MyDiv2").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
     }, 1000); 
}

CSS 和 HTML 非常简单，仅供演示:

.SomeDiv{
    width:50px;
    height:50px;       
    margin:50px 50px;
    background-color: red;}

<div id="MyDiv1" class="SomeDiv">test</div>
<div id="MyDiv2" class="SomeDiv">test</div>

旋转在使用 .css() 时有效，但在使用 .animate() 时无效；为什么会这样，是否有解决方法？

谢谢。

最佳答案

CSS 变换还不能用 jQuery 制作动画。你可以这样做:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

您可以在此处阅读有关步骤回调的更多信息:http://api.jquery.com/animate/#step

http://jsfiddle.net/UB2XR/23/

而且，顺便说一句:您不需要在 jQuery 1.7+ 之前为 css3 转换添加前缀

更新

您可以将它包装在一个 jQuery 插件中，让您的生活更轻松:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  return this.each(function() {
    var $elem = $(this);

    $({deg: 0}).animate({deg: angle}, {
      duration: duration,
      easing: easing,
      step: function(now) {
        $elem.css({
           transform: 'rotate(' + now + 'deg)'
         });
      },
      complete: complete || $.noop
    });
  });
};

$('#MyDiv2').animateRotate(90);

http://jsbin.com/ofagog/2/edit

更新2

我对其进行了一些优化，使 easing、duration 和 complete 的顺序变得无关紧要。

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

更新 2.1

感谢matteo谁注意到 complete-callback 中的 this-context 存在问题。如果通过在每个节点上使用 jQuery.proxy 将回调绑定(bind) 来修复它。

我已经在更新 2 之前将版本添加到代码中。

更新 2.2

如果你想做一些像来回切换旋转这样的事情，这是一个可能的修改。我只是向函数添加了一个开始参数并替换了这一行:

$({deg: start}).animate({deg: angle}, args);

如果有人知道如何使它对所有用例更通用，无论他们是否想设置起始度，请进行适当的编辑。

用法^{...非常简单!}

主要有两种方法可以达到预期的结果。但首先，让我们看一下参数:

jQuery.fn.animateRotate( Angular 、持续时间、缓动、完成)

除了“Angular ”之外，它们都是可选的并且回退到默认的 jQuery.fn.animate-properties:

duration: 400
easing: "swing"
complete: function () {}

第一个

这种方式是最短的方式，但是我们传入的参数越多，看起来就越不清晰。

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

第二

如果参数超过三个，我更喜欢使用对象，所以我最喜欢这种语法:

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

关于jquery - CSS 旋转跨浏览器与 jquery.animate()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15191058/