JQuery背景颜色动画不起作用

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);

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