Browserübergreifende CSS-Rotation mit jQuery.animate()
Problem:
Leistung CSS-Rotationsanimationen mit jQuery.animate() funktionieren nicht browserübergreifend. Die Rotation funktioniert bei Verwendung von .css(), jedoch nicht bei Verwendung von .animate().
Ursache:
CSS-Transformationen können nicht direkt mit jQuery animiert werden.
Lösung:
Zum Durchführen von CSS-Transformationsanimationen mit jQuery können Sie die folgende alternative Methode verwenden:
function AnimateRotate(angle) { var $elem = $('#MyDiv2'); $({deg: 0}).animate({deg: angle}, { duration: 2000, step: function(now) { $elem.css({ transform: 'rotate(' + now + 'deg)' }); } }); }
Erklärung:
Diese Methode verwendet eine benutzerdefinierte „Schritt“-Rückruffunktion, um die „Transform“-Eigenschaft zu aktualisieren des ausgewählten Elements bei jedem Schritt der Animation. Die „Step“-Funktion erhält (jetzt) die aktuelle Animationsposition als Parameter, mit der Sie den gewünschten Drehwinkel berechnen können.
Plugin:
Das können Sie Binden Sie diese Methode zur Vereinfachung in ein jQuery-Plugin ein verwenden:
$.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 }); }); };
Verwendung:
Um das Plugin zu nutzen, können Sie einfach aufrufen:
$('#MyDiv2').animateRotate(90);
Updates:
Die bereitgestellte Lösung wurde mehrmals aktualisiert, um die Effizienz zu verbessern und mehr zu bieten Flexibilität.
Zusätzliche Verwendungsdetails:
Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery browserübergreifende CSS-Rotationsanimationen erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!