jQuery的背景动画问题答案

【问题标题】：Background animation problem with jQueryjQuery的背景动画问题
【发布时间】：2009-08-14 11:01:23
【问题描述】：

我正在创建一个使用 AJAX 切换内容的页面，这 5 个页面中的每一个都有自己的背景颜色。

更改页面，使当前背景动画到新的。我有带有 alpha 透明度的 24 位 PNG，它覆盖了背景颜色的变化（它工作正常）。

但是，有一个小问题。有时，至少在 Firefox 3.5.1 和 Safari 3/4 中，背景会改变，但我的 #main-container div 不会。容器肯定有background: transparent。

问题是，这种情况并非每次都会发生，只会偶尔发生。这可能只是我让浏览器做的事情的一个怪癖吗？

我正在使用一个 jQuery 插件来为背景颜色设置动画。

我想知道，有谁知道我可以如何强制 #main-container 继承它的父容器 (body) 背景？

我知道我可以使用 setInterval() 对其进行 ping，但这将是一个丑陋的解决方案。

非常感谢任何建议。

右侧有一个菜单，单击这些部分就是问题所在。您可能需要至少导航 8 次左右才能看到这个怪癖。

非常感谢任何帮助！

更新

我将尝试使用setInterval() 来检查颜色...但不确定如果我发现它们有误该怎么办。

【问题讨论】：

好看的网站。在 Firefox 3.0.12 中尝试了几次，但无法复制任何问题。是否产生任何错误？
我也无法重现它。但鉴于你只能让它随机发生，我的猜测是某处存在轻微的时间问题。也许你有一些顺序编写的代码应该真正使用回调（比如来自动画或ajax调用之一等），这意味着如果一切加载速度有点慢，它有时会起作用，但如果它发生得很快，那么事情可能会得到不同步。
我很确定我已经在适当的地方使用了回调。代码变得有点笨拙，但我无法重写它（或有时间）。这让我的老板很沮丧！看起来更像是浏览器的怪癖。感谢您的评论。
出于好奇，您解决了这个问题吗（我似乎无法再重现它了）？如果是这样，问题是什么？或者它是那些在改变一些东西后就消失的神秘虫子之一？
我们在 Stack Overflow 上遇到问题，使用 jQuery 动画背景颜色 - 当直接链接到答案时，我们将淡化背景以突出显示您链接到的答案。有时，动画将无法正常工作，因此如果动画不正确，我们只需设置一个回调来设置背景颜色。在这种情况下，可能不是您想要的。

【解决方案1】：

继续我上面关于时间的评论（对不起，这不是一个实际的答案，但评论字段中没有足够的空间）......我认为问题是由于以下两个时间事件：

问题（如果我正确阅读了您的代码）是您正在从一个 div 中获取要淡入的颜色，该 div 由您动态加载的样式表设置样式。如果还没有完成加载（不仅仅是下载，还有样式应用到 DOM），那么你抓取的背景颜色将是旧的。

因此，从这里开始采取的步骤...首先尝试将 CSS 加载器上的超时更改为非常小，看看这是否会使错误更频繁地出现（或使其更大，看看它是否消失）。如果这似乎匹配，那么一个可能的解决方案是在循环中使用超时来测试背景颜色与已知的旧颜色，直到您看到它发生变化，然后继续您的背景动画等。

希望对您有所帮助...

【讨论】：

不幸的是，我认为这不是解决方案，因为第一个版本在一个大 CSS 文件中包含所有样式表信息（没有动态加载它）并且问题就在那里。我还在backgroundFadeTo var 上使用了粗略的警报，它始终是正确的背景颜色。你能重现我的问题吗？谢谢你的回答。
我相信我复制过一次。看起来div.main-container 正确更改了颜色，但body 没有......它与你正在做的事实有什么关系：$('#main-container').css('background', backgroundFadeTo); 明确在updatePage 函数中（在animate 的回调）但不要对 $("body") 做同样的事情？
我认为这只是我试图解决的问题。它似乎在 Safari 中发生得更多。感谢您为我调查。
啊，是的，我现在已经看到了（使用的是 Fx3.5，但只是在 Safari 中尝试过）。从视觉上看，#main-container 的背景颜色在褪色为新颜色（而不是从旧颜色褪色）之前立即切换为白色，对吧？ ...如果是这种情况，是否需要在主容器上设置/动画背景颜色？你不能只在身体的背景上做吗？（或者您将颜色添加到主容器的原因是为了首先解决这个问题？）
我认为我这样做的原因是为了解决正在发生的问题。但我很高兴你终于看到了奇怪的怪癖！看起来 Safari 是罪魁祸首，我想不出有什么方法可以让它运转起来* 让它发挥作用。

【解决方案2】：

我对网站的技术部分有疑问，正如我所看到的（我弄错了吗？），当单击菜单时，您会通过 ajax 获得 css。图像也。我认为如果在页面加载时从服务器获取所有内容，然后在标签上切换 css 类，这将是一个更好的主意。这也可能会解决您的随机问题。例如：背景动画只需要切换两个类，带动画。

【讨论】：