如何将css3转换与jquery动画一起使用?
我有这个旋转木马,我正试图添加一些css3转换选项到它 更确切地说:如何将css3转换与jquery动画一起使用?,jquery,css,transform,jquery-animate,Jquery,Css,Transform,Jquery Animate,我有这个旋转木马,我正试图添加一些css3转换选项到它 更确切地说: -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(45deg); 在我的javascript中 if (newPosition == 1) { new_width = pluginData.largeFeatureWidth; new_height = pluginData.largeFeatureHeight; new_
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg);
在我的javascript中
if (newPosition == 1) {
new_width = pluginData.largeFeatureWidth;
new_height = pluginData.largeFeatureHeight;
new_top = options.topPadding;
new_zindex = $feature.css("z-index");
new_fade = 1.0;
} else {
new_width = pluginData.smallFeatureWidth;
new_height = pluginData.smallFeatureHeight;
new_top = options.smallFeatureOffset + options.topPadding;
new_zindex = 1;
new_fade = 0.4;
}
动画功能在这里运行
.animate(
{
width: new_width,
height: new_height,
top: new_top,
left: new_left,
opacity: new_fade
}
生成的css是:
element.style {
width: 225px;
height: 115px;
top: 70px;
left: 50px;
opacity: 0.4;
z-index: 1;
}
现在,所有这些变量都是由这个插件计算的,我只对向这个动画函数添加变换选项感兴趣,比如:
....
} else {
new_width = pluginData.smallFeatureWidth;
new_height = pluginData.smallFeatureHeight;
new_top = options.smallFeatureOffset + options.topPadding;
new_zindex = 1;
new_fade = 0.4;
new_transform_style = 'preserve-3d';
new_transform = 'rotateY(45deg)';
}
及
但我不确定这些是动画的正确样式符号
有什么想法吗
谢谢默认情况下,您无法在jQuery中设置旋转/缩放动画 但是有一个插件可以解决这个问题:
您可以将自定义属性与
.animate()
一起使用,并使用step函数“手动”执行转换
有关更多详细信息,请参阅。jQuery动画库不支持CSS3转换,它严格基于JavaScript。
.animate(
{
width: new_width,
height: new_height,
top: new_top,
left: new_left,
opacity: new_fade,
transform_style = new_transform_style;
transform = new_transform;
}