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/
そして、ところで: css3 変換に jQuery 1.7+ のプレフィックスを付ける必要はありません
アップデート
これを 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
Update2
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
-context in the complete-の問題を指摘してくれたmateoに感謝します。各ノードでコールバックをバインドして修正した場合。thiscallbackjQuery.proxy
Update 2から以前にコードにエディションを追加しました。
アップデート 2.2
これは、回転を前後に切り替えるようなことをしたい場合に可能な変更です。関数に開始パラメーターを追加し、次の行を置き換えただけです。
$({deg: start}).animate({deg: angle}, args);
開始度を設定するかどうかに関係なく、すべてのユースケースでこれをより一般的にする方法を誰かが知っている場合は、適切な編集を行ってください。
使い方は・・・とっても簡単！
主に、目的の結果を得るには 2 つの方法があります。しかし、最初に、引数を見てみましょう。
jQuery.fn.animateRotate(angle, duration, easing, complete)
「角度」を除いて、それらはすべてオプションであり、デフォルトのプロパティにフォールバックしますjQuery.fn.animate。
duration: 400
easing: "swing"
complete: function () {}
1位
この方法は短い方法ですが、渡す引数が増えるほど、少し不明確に見えます。
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
2位
3 つ以上の引数がある場合はオブジェクトを使用することを好むので、次の構文が私のお気に入りです。
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});