11

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

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

但是，此代码不起作用。

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

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

4

9 回答 9

10

我已经取得了不同程度的成功animate，但发现使用它的内置回调和 jQuerycss似乎适用于大多数情况。

试试这个功能：

$(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'），你只需要它。

于 2011-04-19T14:38:19.733 回答
9

我相信您还需要JQuery Color Animations。

于 2009-11-07T20:27:44.253 回答
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

于 2013-04-24T22:23:38.040 回答
5

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

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

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

于 2009-11-07T20:32:20.280 回答
3

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

于 2009-11-07T20:32:07.970 回答
2

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

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

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

于 2015-12-18T16:55:00.327 回答
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");
于 2009-11-08T13:21:12.367 回答
1

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

在这里获取 color.js

于 2011-05-23T16:14:39.763 回答
1

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

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

资源

于 2017-06-16T08:53:36.167 回答