7

我正在尝试为 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文件本身中......我做错了什么？

4

4 回答 4

5

您还可以在 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-26T11:03:07.783 回答
4

尝试这个：

$('#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-10T04:24:45.053 回答
2

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也将是驼峰命名。

于 2014-02-16T20:10:40.130 回答
0

忘记 jQuery 的$.animate()，而是使用$.velocity(). Velocity.js是 jQuery 的动画扩展。它使用与 jQuery 相同的语法，并允许您对 CSS3 进行动画处理，例如 3D 变换、平移、旋转、褪色、过渡、倾斜……任何您想要的。而且由于它足够聪明，可以在可能的情况下使用 CSS3 而不是 JS，因此它的动画性能也更好。我不明白为什么 jQuery 还没有这样做！

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

于 2015-01-20T22:41:43.963 回答