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

我有同樣的問題，當我包含正確的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 3

我相信你還需要JQuery Color Animations 。

Answer 4

jQuery UI具有高亮效果，可以完全滿足您的需求。

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

您確實有一些選項，例如更改突出顯示顏色。

Answer 5

jQuery 1.3.2（或更早版本）不支持動畫backgroundColor。 僅支持采用數值的參數。 請參閱有關該方法的文檔 。 彩色動畫插件增加了從jQuery 1.2開始執行此操作的能力。

Answer 6

我遇到了同樣的問題，最終結果是在頁面上多次調用jquery的js文件。

雖然這對於任何其他方法都非常好，並且在嘗試使用其他css屬性（如左側）時也可以使用動畫，但它不適用於animate方法中的背景顏色屬性。

因此，我刪除了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。

在這里獲取color.js

Answer 9

剛剛在jquery腳本下面添加了這個片段，它立即開始工作：

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

資源