1

是否有任何 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 中类似 janky，几乎相同，.show()/.hide()只是在完成转换后具有奇怪的脉冲效果。Firefox 3 也对此感到窒息，显然只是忘记了正在显示的表格行的行宽，并使整个事情看起来很糟糕。

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

4

3 回答 3

5

很多时候，拥有多个并发动画对于 IE 来说是很困难的。Javascript 引擎根本不在 Safari、Firefox 或 Chrome 附近。这适用于 IE6 和 IE7。我还没有使用过 IE8。

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

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

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

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

于 2009-01-19T23:03:05.880 回答
1

根据jQuery 的兼容性页面，这种事情是一个错误，应该报告。

于 2009-01-19T21:58:01.660 回答
1

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

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

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

于 2009-01-21T05:31:29.310 回答