CODEWITHSUNDEEP
jquerycssjquery-animatetransformrotation
Joey
Joey

Reputation: 10965

Animating a CSS transform with jQuery

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?

Upvotes: 7

Views: 23856

Answers (4)

Jan Werkhoven
Jan Werkhoven

Reputation: 2953

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/

Upvotes: 1

Ram
Ram

Reputation: 144689

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/

Upvotes: 4

Ignitor
Ignitor

Reputation: 3055

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.

Upvotes: 2

Jan Werkhoven
Jan Werkhoven

Reputation: 2953

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');

Upvotes: 5

Related Questions