Question

可能重复：
Animate element transform rotate

当我尝试使用jquery为我的页面中的图像旋转设置动画时，它无法理解元素的css属性“-webkit-transform”，这有什么不对？

javascript代码：

$("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
        }
    );

});

});

Answer 1

jQuery animate方法无法识别webkit转换属性，您可以使用支持此功能的jQuery插件，尝试jQuery Transit。

Answer 2

有很多插件可以解决这个问题，但是如果你不想这样做，你真的不需要使用它们。

$.fx.step将满足您的所有需求，也非常有用且值得学习。

以下是一个例子：

 $.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)';
 };

然后你可以：

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

这是一个粗略的例子，需要改进，但希望你能得到这个想法。 Useinf $.fx.step您可以设置自定义动画参数来为dom甚至变量的任何方面设置动画。您甚至可以使用它来执行自定义计算以确定动画中的下一步。例如：我最近使用$.fx.step在css3渐变上执行自定义动画，目前没有插件可供使用。

如果您必须使用插件进行轮换，我建议：http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

然而，最终他的插件使用$.fx.step并且值得自己学习。

如何在“animate”方法中为“-webkit-transform”设置css值？

2 个答案: