跨浏览器的jQuery过渡动画？

Question

是否有任何 jQuery 1.3 动画转换在 Firefox 3 和 IE7 中都可以使用？

我有一个包含多个表行（25 或更多）的表，其中一些行开始隐藏（这些行都共享一个公共类；在本示例中，它是“.hidden”）。表头中有一个“显示更多”链接，它通过.click() 绑定到将显示隐藏行的函数，然后将“显示更多”更改为“显示更少”并将.click() 更改为函数反之亦然。

在每个.click()函数中，都有一行像

$(this).parents("tbody").children("tr.hidden").show();

将.show() 替换为.hide() 用于“显示更少”功能。

但是，如果我尝试将.show()/.hide() 替换为.fadeIn()/.fadeOut()，IE 会将其呈现为与.show()/.hide() 几乎相同，只是.hide() 需要一分钟才能生效。那里没有真正的动画。在 IE 中较差，虽然在 Firefox 中效果很好。

如果我尝试使用.slideDown()/.slideUp()，它在 IE 中同样会出现问题，几乎与 .show()/.hide() 相同，只是在完成转换后会出现奇怪的脉冲效果。 Firefox 3 也对此感到窒息，显然只是忘记了正在显示的表格行的行宽，让整个事情看起来很糟糕。

那么动画只是在 IE7 中很烂吗？在这种情况下，有什么方法可以在两种浏览器中都可以正常流畅地过渡？

Answer 1

根据jQuery's compatibility page，这种事情是一个错误，应该报告。

Answer 2

对于 IE，通常有多个并发动画可能很难。 Javascript 引擎根本不在 Safari、Firefox 或 Chrome 附近。这适用于 IE6 和 IE7。我还没有使用过 IE8。

有一点可能会有所帮助，那就是在您尝试制作动画的元素上设置静态高度。从 CSS/布局的角度来看，这通常并不理想，但是......这允许 jQuery 跳过必须先计算每个元素的高度然后再为元素的高度设置动画的任务。

通常，您可以像处理单反相机一样处理动画。 （在这里和我在一起）。如果您想快速拍摄体育赛事的照片，任何摄影师都建议您提前设置焦距、ISO 和快门速度。这样，相机就不必在每次拍摄之间计算所有这些东西，您只需按住快门按钮并点击-点击-点击-点击。 A-Team 风格。

无论如何，当涉及到动画时，请尝试考虑 javascript 需要为动画发生而计算的内容。不透明度、高度、计算高度（元素宽度 + 边框 + 内边距）、屏幕位置，都是不错的起点。

通常，当动画开始时，您实际上可以看到 jQuery 在 DOM 中添加了什么（使用 Firebug）。就像，在不透明动画上，您可以看到 style="opacity:1;"在倒数到 0 开始之前添加。

Answer 3

在谈论跨浏览器的性能时，我不会过于明确。坦率地说，我见过一些重磅的 JS 动画会让 webkit 哭，而 FF 和 IE 处理得很好。

您只需要考虑浏览器具有不同的 CSS 和 JS 实现，有时很难指出您表现不佳的罪魁祸首。

以 IE 为例。如果您有一个 4000x4000 的块级元素和一个 2x2 透明 gif 设置为重复，那么每次您移动元素时，上帝保佑，IE 将重绘 2x2 gif 并计算每个 2000 次的 alpha。 FF 要么缓存背景，要么有显着不同的重绘，在任何一种情况下，性能都是无与伦比的。手册中并没有说，您只需要小心您的操作方式和操作即可。