jq和css动画有什么区别,动画与jQuery一个CSS变换(Animating a CSS transform with jQ

我想动画一个div，并把它绕Y轴180度。 当我把下面的代码，我得到一个jQuery错误：

$("#my_div").animate({

"transform": "rotateY(180deg)",

"-webkit-transform": "rotateY(180deg)",

"-moz-transform": "rotateY(180deg)"

}, 500, function() {

// Callback stuff here

});

});

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

Answer 1:

您也可以预定义旋转的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');

Answer 2:

试试这个：

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

Answer 3:

jQuery的不能动画转换属性开箱。 但是你可以用动画自定义属性.animate()使用，做转型“手动” step功能 ：

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

}

});

见这琴的工作示例(点击蓝色方框)。

这类似于不确定的答案 ，但它不滥用真正的CSS属性。

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

Answer 4:

忘了jQuery的$.animate()而是使用$.velocity() Velocity.js是jQuery的的动画推广。 它使用相同的语法jQuery和允许你CSS3动画等3D变换，平移，旋转，颜色褪色，转换，歪斜，......你要什么。 而且由于它是足够聪明，而不是使用JS CSS3如果可能的话，它有更好的表现藏汉动画。 我不明白为什么jQuery的不这样做呢！

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

文章来源: Animating a CSS transform with jQuery