JQuery背景颜色动画不起作用

Posted 2023-02-21

【中文标题】JQuery背景颜色动画不起作用

【英文标题】：JQuery background color animate not working

【发布时间】：2010-12-14 05:41:52

【问题描述】：

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

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

但是，此代码不起作用。

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

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

【问题讨论】：

jQuery animate backgroundColor 的可能重复项

这能回答你的问题吗？ jQuery animate backgroundColor

【参考方案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();

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

【讨论】：

在这个例子中，黄色背景不会逐渐变成白色。在 FF3 上的 jQuery 1.5.2 中，经过定义的时间段后，bacground 突然变白。

非常感谢！我一直在寻找一个小插件来实现这个效果。

【参考方案2】：

相信你也需要JQuery Color Animations。

【讨论】：

这就是我忘记的。谢谢！

链接似乎已损坏。有修复的机会吗？

【参考方案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

【参考方案4】：

jQuery UI 具有高亮效果，完全符合您的要求。

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

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

【讨论】：

这需要 Effects 包。我正在寻找一种最轻量级的方式，让我不得不使用一堆不同的库来淡化背景颜色:(

【参考方案5】：

在 jQuery 1.3.2（或更早版本）中不支持对 backgroundColor 进行动画处理。仅支持采用数值的参数。请参阅方法上的documentation。从 jQuery 1.2 开始，color animations plugin 添加了执行此操作的功能。

【参考方案6】：

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

虽然这适用于任何其他方法，并且在尝试使用其他 css 属性（如 left）时也适用于 animate，但它不适用于 animate 方法中的背景颜色属性。

因此，我删除了对 jquery 的 js 文件的额外调用，它对我来说非常好。

【参考方案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");

【参考方案8】：

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

Get the color.js here

【参考方案9】：

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

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

Source

【讨论】：

这个答案不容忽视！我之前曾与$(el).animate() 合作过，但不太确定它为什么停止工作。将其添加为 src 就像一个魅力！

其实这似乎是AJAX刷新的一个小问题……动画第一次出现，但不是刷新。