使用jQuery设置CSS变换动画

我正在试图为div创建动画，并让它围绕y轴旋转180度。当我把下面的代码，我得到一个jQuery错误：使用jQuery设置CSS变换动画

$("#my_div").animate({ 
     "transform": "rotateY(180deg)", 
     "-webkit-transform": "rotateY(180deg)", 
     "-moz-transform": "rotateY(180deg)" 
    }, 500, function() { 
     // Callback stuff here 
    }); 
});

它说：“遗漏的类型错误：无法读取属性‘默认视图’的未定义的”，并说这是在jQuery的文件本身......我在做什么错？

来源

2012-06-10 Joey

试试这个：

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

来源

2012-06-10 04:24:45 undefined

感谢，我最终得到了一个名为交通的插件，因为它是做似乎#D旋转的唯一途径... – Joey

您也可以预定义旋转的CSS类，并使用jQuery添加/删除类：

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

来源

2013-11-26 11:03:07

jQuery不能动画变换属性开箱即可。但是你可以用.animate()动画自定义属性和“手动”做改造使用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 
     } 
    });

的工作示例见this fiddle（点击蓝色方框）。

这与undefined's answer类似，但它并未滥用真正的CSS属性。

注：自定义属性的名称应该是一个jQuery.camelCase()名字，因为.animate()使用驼峰格式名称内部，因此，将存储使用驼峰格式名称的属性的当前值和fx.prop也将是驼峰格式名称。

来源

2014-02-16 20:10:40 Ignitor

忘掉jQuery的$.animate()，改为使用$.velocity()。 Velocity.js是jQuery的动画扩展。它使用与jQuery相同的语法，并允许您对CSS3进行动画处理，例如3D变换，平移，旋转，颜色渐变，转换，倾斜，......任何你想要的。而且，由于它足够聪明，可以使用CSS3而不是JS，所以它的动画效果也很好。我不明白为什么jQuery不这样做！

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

来源

2015-01-20 22:41:43

使用jQuery设置CSS变换动画

回答

相关问题