JQuery背景颜色动画不起作用

我想将“exampleDiv”的背景颜色从原始白色背景更改为当我调用下面的代码时立即将背景变为黄色，然后淡出回原始的白色背景。

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast"); 

但是，此代码不起作用。

我只有JQuery核心和JQuery UI链接到我的网页。

为什么上面的代码不起作用？

Answer 1

我在animate取得了不同的成功，但发现使用内置的回调加上jQuery的css似乎适用于大多数情况。

试试这个function：

 $(document).ready(function () { $.fn.animateHighlight = function (highlightColor, duration) { var highlightBg = highlightColor || "#FFFF9C"; var animateMs = duration || "fast"; // edit is here var originalBg = this.css("background-color"); if (!originalBg || originalBg == highlightBg) originalBg = "#FFFFFF"; // default to white jQuery(this) .css("backgroundColor", highlightBg) .animate({ backgroundColor: originalBg }, animateMs, null, function () { jQuery(this).css("backgroundColor", originalBg); }); }; }); 

并称之为：

 $('#exampleDiv').animateHighlight(); 

使用jQuery 1.5在IE9，FF4和Chrome中测试过（不需要UI插件）。 我没有使用jQuery颜色插件 – 如果你想使用命名颜色（例如'yellow'而不是'#FFFF9C' ）你只需要它。

Answer 2

我相信你也需要JQuery Color Animations 。

Answer 3

我有同样的问题，当我包含正确的js文件时，我能够使一切工作正常。

我更进了一步，找到了一个人写的好扩展。

 jQuery.fn.flash = function (color, duration) { var current = this.css('backgroundColor'); this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2) .animate({ backgroundColor: current }, duration / 2); } 

上面的代码允许我执行以下操作：

 $('#someId').flash('255,148,148', 1100); 

该代码将使您的元素闪烁为红色，然后恢复为原始颜色。

这是一些示例代码。 http://jsbin.com/iqasaz/2

Answer 4

jQuery UI具有高亮效果，可以完全满足您的需求。

  $("exampleDiv").effect("highlight", {}, 5000); 

您确实有一些选项，例如更改突出显示颜色。

Answer 5

jQuery 1.3.2（或更早版本）不支持动画backgroundColor。 仅支持采用数值的参数。 请参阅有关该方法的文档 。 彩色动画插件增加了从jQuery 1.2开始执行此操作的能力。

Answer 6

我遇到了同样的问题，最终结果是在页面上多次调用jquery的js文件。

虽然这对于任何其他方法都可以正常工作，并且在尝试使用其他css属性（如左侧）时也可以使用动画，但它不适用于animate方法中的背景颜色属性。

因此，我删除了jquery的js文件的附加调用，它对我来说绝对没问题。

Answer 7

对我来说，它适用于effects.core.js 。 但是，我不记得那是否真的需要。 我认为它只适用于hex值。 这是一个hover代码示例，可让您在hover时淡化。 认为它可能有用：

 jQuery.fn.fadeOnHover = function(fadeColor) { this.each(function() { jQuery(this).data("OrigBg",jQuery(this).css("background-color")); jQuery(this).hover( function() { //Fade to the new color jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000) }, function() { //Fade back to original color original = jQuery(this).data("OrigBg"); jQuery(this).stop().animate({backgroundColor:original},1000) } ); }); } $(".nav a").fadeOnHover("#FFFF00"); 

Answer 8

我不得不使用color.js文件来使其工作。 我正在使用jquery 1.4.2。

在这里获取color.js

Answer 9

刚刚在jquery脚本下面添加了这个片段，它立即开始工作：

资源