使用jQuery动画化CSS变换

Question

我正在尝试为div设置动画,让它围绕y轴旋转180度.当我调用以下代码时,我得到一个jQuery错误:

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

它说"Uncaught TypeError:无法读取未定义的属性'defaultView'"并说它在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/