-2

我用下面的代码片段，使一个元素的背景lightblue，然后慢慢淡出到whiite 30秒以上：jQuery的动画问题

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

两个问题。

首先，不是渐变为白色，而是将不透明度淡化为100％？这样，如果我选择更改页面的背景颜色，我不必更改“白色”。

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

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

EDIT2：

显然是因为我说我推出自己的解决方案，但并没有表现出来我得到downvoted遗忘。我的错。我不想自我推销。我的代码100％的时间工作，不需要jQuery。

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

来源

2009-07-23 core

你有问题的链接？如果不是，你可以在pastebin.me或jsbin.com上重现它吗？ – redsquare 2009-07-31 23:12:10

-1：第二个问题的议论性措辞。此外，浏览器配置和问题标记将有助于诊断。 – 2009-08-04 15:54:15

来自http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback：“只支持采用数值的属性（例如，不支持backgroundColor）。” – 2009-08-05 12:59:39

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

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

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

对于第一个问题：我知道你说你会找到一个解决办法，但对我来说，以下工作（甚至IE6），所以我想我会发布它，因为它可能会有所不同从你的想法。（请注意，设置CSS“不透明度”属性通过jQuery.css()作品在IE浏览器，而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-03 17:53:26 Kip

动画只适用于数字：演示和代码可以在这里找到。查看jquery文档。你可以做不透明，但你不能做背景颜色。您可以使用颜色插件。背景颜色使用“红色”，“蓝色”，“＃493054”等字符串，不是数字。

来源

2009-07-23 20:57:35

什么：

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

来源

2009-07-23 20:59:13

我来回答你的第一个问题。您可以动画不透明度是这样的：

.animate({opacity: 1.0}, 3000)

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

来源

2009-07-23 21:00:13

不要忘了颜色插件。

见here

当颜色不能动画蓝，你可以尝试使用回调函数来记录消息到控制台。然后，您可以检查事件实际上是否已解雇并完成。如果是这样，那么你可能会使用两个动画。第一个动画到一个中间房子的颜色，然后使用回调动画为白色（所以你得到两个樱桃的叮咬，如果外部失败，但完成回调有第二个去）

这将是很好如果您可以尝试重新创建问题或给出问题本身的网址。

如

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

来源

2009-07-23 21:04:37 redsquare

你可能有两个div占据相同的空间（使用的位置是：绝对的;和位置：相对;设置一个较高的Z-index以确保一个大于和其他的在下面，顶部的会有一个透明的背景，下面的会有背景颜色，然后只是淡出下面的背景。

来源

2009-07-31 20:10:12

你总是可以使用类似的东西，完全避免使用JQuery动画方法。此外，您可以通过从适当的项目读取背景颜色（可能涉及在树上行走）来删除“白色”编码。

来源

2009-07-31 20:11:18

至于第二个问题：

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

来源

2009-08-04 06:22:38 Huppie

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

对于您的情况，一个可能的简单修复方法是在您的原始代码清单中将颜色词“白色”更改为“透明”。颜色插件可能无法识别该颜色词（尚未检查文档），但将背景颜色设置为“透明”将使其背后的任何颜色（页面背景，如果没有其他内容）闪耀，如果更改页面背景，请更新。

来源

2009-08-06 17:39:06 MidnightLightning

jQuery的动画问题

EDIT2：

回答

相关问题