jQuery的背景颜色动画无法正常工作 [英] JQuery background color animate not working

问题描述

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

I want to change the background color of 'exampleDiv' from the original white background to when I call the code below to immediate change the background yellow and then fade back to the original white background.

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

但是，此代码不起作用.

However, this code does not work.

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

I have only the JQuery core and JQuery UI linked to my web page.

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

Why doesn't the code above work?

推荐答案

我在animate上取得了不同的成功，但是发现在大多数情况下，使用其内置的回调以及jQuery的css似乎是可行的.

I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases.

尝试使用此功能:

$(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').

Tested in IE9, FF4, and Chrome, using jQuery 1.5 (do NOT need UI plugin for this). I didn't use the jQuery color plugin either - you would only need that if you want to use named colors (e.g. 'yellow' instead of '#FFFF9C').

这篇关于jQuery的背景颜色动画无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！