EDIT2：

Question

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

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

两个问题。

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

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

编辑：赏金是解决第二个问题的问题。

EDIT2：

显然我被遗忘了，因为我说我推出了自己的解决方案，但没有表现出来。我的错。我不想自我推销。我的代码100％的工作时间，不需要jQuery。演示和代码可以在以下网址找到：

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

Answer 1

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

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

如果您可以提供一个示例HTML代码段来重现此动画问题，那么我们可以更轻松地为您提供帮助。在我下面粘贴的脚本中，我可以整天点击它，像我喜欢的那样快或慢，它永远不会为我制作动画。

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

<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>

Answer 2

不要忘记颜色插件。

请参阅here

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

如果您可以尝试重新创建问题或提供问题的网址，那将是件好事。

e.g

$("#" + post.Id).css("background-color", "lightblue")
   .animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
      $(this).animate({ backgroundColor: "#ffffff" }, 15000)
});

Answer 3

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

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);
    }
}

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

Answer 4

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

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

Answer 5

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

.animate({opacity: 1.0}, 3000)

我认为您也可以尝试使用 fadeOut / fadeIn ..

Answer 6

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

Answer 7

怎么样：

$("#" + post.Id).fadeIn( "slow" );

Answer 8

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

Answer 9

至于第二个问题：

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

jQuery动画问题

EDIT2：

9 个答案: