CSS-Transformationen können mit jQuery noch nicht animiert werden. Sie können so etwas tun:
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)'
});
}
});
}
Weitere Informationen zum Step-Callback finden Sie hier: http://api.jquery.com/animate/#step
http://jsfiddle.net/UB2XR/23/
Übrigens: Sie müssen css3-Transformationen nicht mit jQuery 1.7+ voranstellen
Aktualisieren
Sie können dies in ein jQuery-Plugin einbinden, um Ihr Leben ein bisschen einfacher zu machen:
$.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
Ich optimiert es ein wenig die Reihenfolge zu machen easing, durationund completeunbedeutend.
$.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);
});
};
Update 2.1
Vielen Dank an matteo, der ein Problem mit dem this-context in the complete- festgestellt hat callback. Wenn dies behoben wurde, binden Sie den Rückruf mit jQuery.proxyauf jedem Knoten.
Ich habe die Edition bereits ab Update 2 zum Code hinzugefügt .
Update 2.2
Dies ist eine mögliche Änderung, wenn Sie beispielsweise die Drehung hin und her schalten möchten. Ich habe der Funktion einfach einen Startparameter hinzugefügt und diese Zeile ersetzt:
$({deg: start}).animate({deg: angle}, args);
Wenn jemand weiß, wie er dies für alle Anwendungsfälle allgemeiner gestalten kann, unabhängig davon, ob er einen Startgrad festlegen möchte oder nicht, nehmen Sie bitte die entsprechende Änderung vor.
Die Verwendung ... ist ganz einfach!
Hauptsächlich haben Sie zwei Möglichkeiten, um das gewünschte Ergebnis zu erzielen. Aber zuerst werfen wir einen Blick auf die Argumente:
jQuery.fn.animateRotate(angle, duration, easing, complete)
Mit Ausnahme von "Winkel" sind alle optional und greifen auf die Standardeigenschaften jQuery.fn.animatezurück:
duration: 400
easing: "swing"
complete: function () {}
1
Dieser Weg ist kurz, sieht aber etwas unklar aus, je mehr Argumente wir übergeben.
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
2 ..
Ich bevorzuge die Verwendung von Objekten, wenn mehr als drei Argumente vorhanden sind. Daher ist diese Syntax mein Favorit:
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});