CSS transform animation with jQuery

Question

I am trying to animate a div and make it rotate 180 degrees around the y axis. When I call the following code, I get a jQuery error:

$("#my_div").animate({ "transform": "rotateY(180deg)", "-webkit-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)" }, 500, function() { // Callback stuff here }); }); 

It says: "Uncaught TypeError: it is not possible to read the" defaultView "property from undefined" and says so in the jQuery file itself ... what am I doing wrong?

Answer 1

Try the following:

 $('#myDiv').animate({ textIndent: 0 }, { step: function(go) { $(this).css('-moz-transform','rotate('+go+'deg)'); $(this).css('-webkit-transform','rotate('+go+'deg)'); $(this).css('-o-transform','rotate('+go+'deg)'); $(this).css('transform','rotate('+go+'deg)'); }, duration: 500, complete: function(){ alert('done') } }); 

http://jsfiddle.net/RPSzb/2/

Answer 2

You can also predefine rotation in the CSS class and use jQuery to add / remove a class:

CSS

 #my_div { -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .rotate { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 

JQuery

 $("#my_div").addClass('rotate'); 

Answer 3

jQuery cannot change conversion properties out of the box. But you can animate custom properties with .animate() and do the conversion manually using the step function :

 var $myDiv = $("#my_div"), ccCustomPropName = $.camelCase('custom-animation-degree'); $myDiv[0][ccCustomPropName ] = 0; // Set starting value $myDiv.animate({ccCustomPropName : 180}, { duration: 500, step: function(value, fx) { if (fx.prop === ccCustomPropName ) { $myDiv.css('transform', 'rotateY('+value+'deg)'); // jQuery will add vendor prefixes for us } }, complete: function() { // Callback stuff here } }); 

See this script for a working example (click on the blue frame).

This is similar to an undefined answer , but does not abuse the real CSS property.

Note. . The name of the custom property must be the name jQuery.camelCase () , because .animate() uses the camelCased names internally and, therefore, saves the current value of the property using the camelCased name, and fx.prop will also be the name camelCased.

Answer 4

Forget about jQuery $.animate() , use $.velocity() instead. Velocity.js is a jQuery animation extension. It uses the same syntax as jQuery and allows you to animate CSS3, such as 3D transforms, translate, rotate, fade colors, transitions, skew, ... whatever you want. And since he is smart enough to use CSS3 instead of JS, where possible, it brings to life better performance as well. I don’t understand why jQuery doesn’t do this yet!

http://julian.com/research/velocity/