Animating a CSS transform with jQuery

Question

I'm trying to animate a div, and get it to rotate about the y-axis 180 degrees. 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: Cannot read property 'defaultView' of undefined" and says it's in the jQuery file itself... what am I doing wrong?

Solution 1

You can also predefine the rotation in a CSS class and use jQuery to add/remove the 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');

Solution 2

Try this:

$('#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/

Solution 3

jQuery cannot animate transform properties out of the box. But you can animate custom properties with .animate() and do the transformation "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 fiddle for a working example (click on the blue box).

This is similar to undefined's answer but it doesn't abuse a real CSS property.

Note: The name of the custom property should be a jQuery.camelCase() name since .animate() uses the camelCased names internally and therefore, will store the current value of the property using the camelCased name and the fx.prop will also be the camelCased name.

Solution 4

Forget about jQuery's $.animate(), instead use $.velocity(). Velocity.js is an animation extention of jQuery. It uses the same syntax as jQuery and allows you to animate CSS3 such as 3D transforms, translates, rotates, colour fading, transitions, skews, ... Anything you want. And since it is smart enough to use CSS3 instead of JS where possible, it animates with a better performance aswell. I don't understand why jQuery doesn't do this yet!

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

View more solutions

Comments

[Joey]

thanks, I ended up getting a plugin called Transit, since it is the only way to do #D rotations it seems...

[Cosimo wiSe]

how did you define the go argument in the function?

[Ram]

@CosimowiSe step is a callback function. The callback function's arguments are passed via the code that calls the function. In this case it's jQuery intenal code that calls the function.

[Guilherme Lima]

Thanks for the info, this library solved my life!