how to setup css value for "-webkit-transform" in the "animate" method?

Question

Possible Duplicate:
Animate element transform rotate

When I try to animate the rotation of images in my page using jquery, it's could not understand css property "-webkit-transform" for element, what's wrong?

javascript code:

$("body").toggle(
function(){
    $("img").animate(
        {
        opacity:0.5,
        "-webkit-transform":"rotate(180deg)"
        },1000,function(){
            //some function
        }
    );
},
function(){
    $("img").animate(
        {
        opacity:1,
        webkitTransform:"rotate(-180deg)"
        },1000,function(){
            //some function
        }
    );

});

});

Why use jQuery for animation? Use CSS3 instead: `-webkit-transition: -webkit-transform;` — Derek 朕會功夫, Jul 15 '12 at 21:20
Googling "animate transform jquery" brings up [this other question](http://stackoverflow.com/questions/5462275/animate-element-transform-rotate) In short, simple animate cannot do this, but there is another way. — xixixao, Jul 15 '12 at 21:26

score 4 · Accepted Answer · answered Jul 15 '12 at 21:10

4

jQuery animate method doesn't recognize webkit transform property, you can use jQuery plugins that support this feature, try jQuery Transit.

answered Jul 15 '12 at 21:10

Ram

143,282
16
168
197

Fresheyeball · Answer 2 · 2012-07-15T22:57:52.623

There are plenty of plugins that handle this, however you really don't need to use them if you don't want to.

$.fx.step will handle all your needs and is also uber useful and worth learning.

Here is an example :

 $.fx.step.webkitRotate = function(fx){
      if(!fx.init){
          var currentRotation = fx.elem.style.webkitTransform;
          currentRotation = currentRotation.split('(')[1];
          currentRotation = currentRotation.split('deg)')[0];
          fx.begin = currentRotation;
          fx.init = true;
      }         
      fx.elem.style.webkitTransform = 'rotate('+fx.pos+'deg)';
 };

You could then:

 $("img").animate(
    {
    opacity:1,
    webkitRotate:-180
    },1000,function(){
        //some function
    }
);

Its a crude example, and needs refinement, but hopefully you get the idea. Useinf $.fx.step you can set up custom animation params to animate any aspect of the dom or even variables. You can even use it to do custom calculations to determine the next step in the animation. For example: I recently used $.fx.step to do a custom animation on a css3 gradient, which there is currently no pluggin for.

If you must use a pluggin for rotation I recommend : http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

However ultimately his pluggin uses $.fx.step and its worth learning on your own.

I had no idea you could make your own step animation. Thanks! — Vestride, Jul 16 '12 at 01:45

how to setup css value for "-webkit-transform" in the "animate" method?

2 Answers2