jQuery动画不能与变量一起工作答案

【问题标题】：jQuery animate not functioning with variablesjQuery动画不能与变量一起工作
【发布时间】：2013-12-21 11:17:49
【问题描述】：

我正在练习 jQuery。我在脚本中的代码中使用了以下代码，但无法正常工作。此代码从 DOM 中提取 9 个图像并根据数组 arr_trans 中定义的值转换图像，并且应该并行动画，所以我使用了 queue:false 。

for ( var i=0; i < $('.mc-item').length;i++) {

$('.mc-item').eq(i).animate({"-webkit-transform":"translate("+ arr_trans[i]+"px"+")"},{duration:100, queue:false});

}

arr_trans[] --> 包含 9 个不同的值来翻译不同位置的每个图像。

$('.mc-item') --> 从 DOM 中获取 9 张图片

如果我使用“CSS”而不是“animate”，上面的代码就可以工作。注意，我在 chrome 浏览器中运行。请指教。

【问题讨论】：

为什么是+"px"+")" 而不是+"px)"？无论如何，看看this post。

标签： jquery html

【解决方案1】：

根据jQuery API（部分“动画属性和值”）可以对以下属性进行动画处理：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理

因为transform 不是全数字 (translate())，动画师不知道如何解释它。

除非有我不知道的插件，否则您必须使用 setTimeout 和多个 .css-actions 或使用 CSS3-animations 自己实现动画。

【讨论】：