JQuery背景颜色动画不起作用

Question

JQuery背景颜色动画不起作用

11

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

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

然而，此代码无法正常工作。

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

为什么上面的代码不能正常工作？

- AndyT

可能是重复的问题：jQuery animate backgroundColor。 - mercator

这个回答解决了你的问题吗？jQuery动画背景色 - Heretic Monkey

9个回答

9

我相信你也需要JQuery颜色动画。

- recursive

那就是我忘记的东西。谢谢！ - Lukas

链接似乎已经失效了。有修复的机会吗？ - ndtreviv

8

我曾经也遇到过同样的问题，当我包含了正确的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

- inVINCEble

5

jQuery UI有一个高亮效果，可以完全满足你的需求。

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

您有一些选项，比如更改高亮颜色。

- Vincent Ramdhanie

这需要使用Effects包。我正在寻找最轻量级的方法来淡化背景颜色，而不必使用大量不同的库:( - AndyT

3

在jQuery 1.3.2（或更早版本）中，不支持对backgroundColor进行动画处理。仅支持采用数值的参数。请参阅该方法的文档。自jQuery 1.2起，颜色动画插件增加了此功能。

- tvanfosson

2

我遇到了相同的问题，最终发现页面上调用了多个jquery js文件。

虽然这对于任何其他方法以及使用其他CSS属性（如左侧）尝试使用animate时都可以正常工作，但是对于animate方法中的背景颜色属性不起作用。

因此，我删除了额外调用jquery的js文件，并且它对我完全有效。

- Jay

1

对我来说，使用 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");

- Eric

1

我必须使用color.js文件才能使其工作。我正在使用jquery 1.4.2。

在这里获取color.js

- aruffo3

1

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

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

源代码

- Darush

这个答案不应该被忽视！我之前使用过 $(el).animate()，但不太确定为什么它停止工作了。将这个作为 src 添加进去就像魔法一样起作用了！ - Malmadork

实际上，这似乎在 AJAX 刷新方面有一个小问题... 动画只会在第一次发生，但在刷新时不会。 - Malmadork

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- matadur · Accepted Answer

我在使用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();

在IE9，FF4和Chrome中进行测试，使用jQuery 1.5（不需要UI插件）。我也没有使用jQuery颜色插件-您只需要在需要使用命名颜色（例如'yellow'而不是'#FFFF9C'）时才需要该插件。