jQuery animate一个-webkit-transform [英] jQuery animate a -webkit-transform

问题描述

是否可以使用jQuery来动画webkit translate3d？

Is it possible to use jQuery to animate a webkit translate3d?

我读到当使用jQuery的animate属性时，必须使用css属性，

I read that when using the animate property of jQuery that you must camel case the css properties but in the case of the translate3d this doesn't seem to work.

我有以下代码，我想动画，而不是它只是立即发生？

I have the following code that I would like to animate instead of it just happening immediately?

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");

为了说明，e是一个变量，传递给我的上述代码运行的函数。

For clarification "e" is a variable that is passed to a function that my above code is run from.

推荐答案

使用文本缩进示例：

$(".test").animate({ textIndent: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');

此外，您可以移除 scale（1）来自 -webkit-transform 。

Also, you can remove scale(1) from -webkit-transform.

JSFIDDLE

为了避免更改有用的属性，请参阅以下示例：

To avoid changing of a useful property you can give any property there. See the example bellow:

$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');

JSFIDDLE

由于我是Firefox粉丝，请实现Firefox兼容性，添加此行，例如 此处 ：

And because I am a Firefox fan, please implement Firefox compatibility too adding this line, like here:

$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");

这篇关于jQuery animate一个-webkit-transform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！