JQuery fadeIn 没有在 Chrome 上完全淡入

Posted 2023-02-22

【中文标题】JQuery fadeIn 没有在 Chrome 上完全淡入

【英文标题】：JQuery fadeIn not fully fading in on Chrome

【发布时间】：2015-03-06 13:53:39

【问题描述】：

当我使用淡入显示内容时，我一直在处理 Chrome 中的一个错误。它将显示但透明，或者它的块将完全不透明地显示，而其他块根本不显示。当浏览器重绘它时，即通过调整窗口大小，或突出显示内容等，内容正确显示。

在 Safari 和 Firefox 中测试时，它可以正确淡入。

$(stuff).hide().appendTo("body").fadeIn(100);

在此复制：http://jsfiddle.net/kuiche/x9fwdaLc/

【问题讨论】：

1.永远不要从 javascript 编写 html，尽可能避免这种情况。 2. 这不是一个错误报告网站。 3. 对我来说正确淡入淡出，必须来自您的浏览器/操作系统

html是实际应用中Ajax调用的响应。 jsfiddle 是一个最小的例子。您是否尝试过运行它几次？有时它确实有效......

无法在 Chrome 上重现。我在 Chrome v39 上，如果这很重要的话。

可以在 Chrome Beta (v40) 上不时重现，这似乎是一个很好的老时间问题。如果我将持续时间提高到 130（或更高），则所有渲染效果都很好。如果我将淡入淡出线放在超时 0 回调中，一切都会很好地呈现。如果我把 appendTo 和 fade 部分放在 hide 的回调中，所有渲染都很好。似乎有很多解决方法。

啊，我注意到添加延迟会使它更频繁地工作（虽然不是 100%）。 hide 中的回调似乎在 jsFiddle 中工作，似乎是最好的解决方案。谢谢！

【参考方案1】：

$(stuff).hide().appendTo("body").fadeIn(100, function() 
  $(this).show();
);

在元素完成时强制将完整显示作为回调，它是淡入。