Question

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

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

但是，此代码不起作用。

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

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

Answer 1

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

尝试此功能：

$(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文件时，我能够让一切工作正常。

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>

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

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。仅支持采用数值的参数。请参阅方法的documentation。 color animations plugin增加了从jQuery 1.2开始执行此操作的能力。

Answer 6

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

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

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

Answer 7

对我来说，它与effects.core.js一起运行良好。但是，我不记得那是否真的需要。我认为它只适用于十六进制值。这是一个悬停代码示例，可让您在悬停时淡化。认为它可能有用：

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。

Get the color.js here

Answer 9

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

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Source

JQuery背景颜色动画不起作用

9 个答案: