-2

我使用以下代码段将元素的背景设为浅蓝色，然后在 30 秒内慢慢淡化为白色：

$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);

两个问题。

首先，不是褪色为白色，有没有办法将不透明度褪色到 100%？这样，如果我选择更改页面的背景颜色，我就不必更改“白色”？

其次，大约每 10 次或 15 次，背景会保持浅蓝色并且不会褪色为白色。我正在使用最新版本的 jQuery 和 UI 核心。可能出了什么问题？

编辑：赏金是为了解决关于第二个问题的问题。

编辑2：

显然，我被否决了，因为我说我推出了自己的解决方案，但没有展示出来。我的错。我不想自我推销。我的代码 100% 的时间都可以工作，并且不需要 jQuery。演示和代码可以在以下位置找到：

http://prettycode.org/2009/07/30/fade-background-color-in-javascript/

4

9 回答 9

14

对于您的第二个问题：根据我的经验，这通常是因为页面上的其他地方发生了 Javascript 错误。一旦出现一个 Javascript 异常，页面的其余部分就会停止运行 Javascript。尝试安装Firebug（如果您还没有安装），然后打开“控制台”选项卡并启用它。然后任何 javascript 错误或异常都将打印到控制台。

另一件要尝试的事情（这有点与我的最后陈述相矛盾......）是禁用所有浏览器插件以查看是否可以重新创建。有时它们会干扰页面上的脚本（尤其是 GreaseMonkey。）

如果您可以提供重现此动画问题的示例 HTML 片段，那么我们为您提供帮助会容易得多。 在我粘贴在下面的脚本中，我可以整天点击它，无论快慢都可以，而且它永远不会为我制作动画。

对于第一个问题：我知道您说您找到了解决方法，但以下内容对我有用（即使在 IE6 上）所以我想我会发布它，因为它可能与您的想法不同。（请注意，通过jQuery.css()在 IE 上设置 CSS 的“不透明度”属性，而 IE 不支持直接在 CSS 中的“不透明度”属性。）

<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
  $('#test').css('opacity', myOpacity);
  $('a').click(function(){
    myOpacity = 1.0 - myOpacity;
    $('#test').animate({ opacity: myOpacity });
    return false;
  });
});
</script>
</head>
<body>
<p><a href="#">Click me</a></p>
<div id="test">Test</div>
</body></html>
于 2009-08-03T17:53:26.060 回答
9

不要忘记颜色插件。

看这里

当颜色无法动画为蓝色时，您可以尝试使用回调函数将消息记录到控制台。然后，您可以检查该事件是否实际触发并完成。如果是这样，那么您可能会使用两个动画。第一个动画到中途房子颜色然后使用回调动画到白色（所以你得到两口樱桃，如果外部失败但完成回调有第二次去）

如果您可以尝试重新创建问题或提供问题本身的 url，那就太好了。

例如

$("#" + post.Id).css("background-color", "lightblue")
   .animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
      $(this).animate({ backgroundColor: "#ffffff" }, 15000)
});
于 2009-07-23T21:04:37.823 回答
3

你总是可以使用这样的东西，完全避免使用 JQuery animate 方法。

setTimeout(function() { UpdateBackgroundColor(); }, 10);

UpdateBackgroundColor() {
    // Get the element.
    // Check it's current background color.
    // Move it one step closer to desired goal.
    if (!done) {
        setTimeout(UpdateBackgroundColor, 10);
    }
}

此外，您可以通过从适当的项目中读取背景颜色来删除“白色”编码（这可能涉及爬上树）。

于 2009-07-31T20:11:18.050 回答
2

可以让 jQuery 更改项目的 Opacity CSS 属性（如另一个答案中所述），但有两个原因导致这不适用于您的场景。首先，让“100% 不透明”的东西完全可见。如果该项目没有对其不透明度进行任何其他修改，则默认不透明度为 100%，并且不会有任何变化，所以我猜你的意思是褪色到 0% 的不透明度，这将消失。这将摆脱浅蓝色背景，以及它上面的文字，我认为这不是你的意图。

对于您的情况，一个可能很容易解决的方法是将原始代码列表中的颜色词“白色”更改为“透明”。颜色插件可能无法识别该颜色词（尚未检查文档），但将背景颜色设置为“透明”将使其后面的任何颜色（页面背景，如果没有别的）闪耀，并且会自我如果您更改页面背景，请更新。

于 2009-08-06T17:39:06.270 回答
1

我会回答你的第一个问题。您可以像这样为不透明度设置动画：

.animate({opacity: 1.0}, 3000)

我想你也可以尝试使用淡出/淡入..

于 2009-07-23T21:00:13.713 回答
0

至于第二个问题：

如果您认为 JQuery 的默认动画类无法正常工作，您可以尝试Bernie 的 Better Animation Class。我对那个图书馆有一些很好的经验。

于 2009-08-04T06:22:38.423 回答
0

Animate 仅适用于数字。请参阅 jquery 文档。你可以做不透明度，但你不能做背景颜色。您可以使用颜色插件。背景颜色使用诸如“红色”、“蓝色”、“#493054”等字符串......它们不是数字。

于 2009-07-23T20:57:35.157 回答
0

关于什么：

$("#" + post.Id).fadeIn( "slow" );
于 2009-07-23T20:59:13.310 回答
0

您可能有两个占据相同空间的 div（使用 position：absolute；和 position：relative；将 z-index 设置在一个较高的位置以确保一个在上面，另一个在下面。顶部的一个将具有透明背景并且下面的那个会有背景颜色。然后只是淡出下面的那个。

于 2009-07-31T20:10:12.763 回答