属性的顺序与 jQuery 动画有关吗？

Posted 2023-05-08

【中文标题】属性的顺序与 jQuery 动画有关吗？

【英文标题】：Order of properties matter with jQuery animate?

【发布时间】：2011-08-26 07:12:54

【问题描述】：

在刚刚花了太多时间调试为什么我的 jQuery animate() 调用停止正常工作之后，我意识到我的问题是 animate() 调用中的属性必须按特定顺序排列。所以以下将不正常工作：

$('div.example').animate(left: 50, top: 100, opacity: 1);

将会发生的是div.example 将淡入（如果还没有）并且将仅出现在左侧：50，顶部：100 的位置，它不会动画。要使其按预期工作，您必须重新排序：

$('div.example').animate(opacity: 1, left: 50, top: 100);

我在 FF4 和 Chrome 中对此进行了测试。这让我感到惊讶，因为我什至不知道 javascript 保证了对象中属性的顺序，而 jQuery 在他们的文档中没有提到这个要求。所以我的问题基本上是，我做错了什么吗？这是预期的吗？是否有关于正确顺序的文件？这在所有浏览器中都能正常工作吗？

我也在使用 jQuery UI。我知道这增强了标准动画方法以允许动画颜色等。这可能是问题吗？

【问题讨论】：

太傻了，json对象不管它们的顺序是什么，除非它是一个css问题，因为jquery会在for循环中读取它们，或者直接访问option.left，等等在。顺序在这里不重要，

这是一个非常奇怪的行为。正如您所提到的，没有订单保证，并且无论是否设置了opacity，问题都不会扩大。引起我的注意..

这确实很奇怪。确认我收到相同的行为jsfiddle.net/garreh/Tpb5z

【参考方案1】：

这是一个 jQuery 错误：cannot animate position and opacity at same time，但在 1.6 中已修复。1

同时，您可以通过在末尾添加“px”来修复它：

$('div.example').animate(top: '100px', left: '50px', opacity: 1);

【讨论】：

我正在使用最新的（自动通过谷歌的 CDN）。嗯，看起来根据谷歌最新的是v1.6.0。我想 1.6.1 一定是刚出来的。好吧，至少有一个特定订单的临时修复是有效的。感谢您的解释和替代解决方法。

【参考方案2】：

您的属性 left 和 top 是否在 css 中较早声明？某些浏览器（如果我没记错的话是 webkit）在动画未声明的属性时遇到问题。尝试将 left 和 top 设置为 0 或其他一些值，看看是否有效。