2

可能重复：
动画元素变换旋转

当我尝试使用 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
        }
    );

});

});
4

2 回答 2

4

jQueryanimate方法不识别webkittransform属性，可以使用支持该功能的jQuery插件，试试jQuery Transit。

于 2012-07-15T21:10:30.060 回答
1

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

$.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并且值得您自己学习。

于 2012-07-15T22:43:01.997 回答