我想将“exampleDiv”的背景颜色从原来的白色背景更改为当我调用下面的代码立即将背景更改为黄色然后淡出回到原来的白色背景时。
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
但是，此代码不起作用。
我只有 JQuery 核心和 JQuery UI 链接到我的网页。
为什么上面的代码不起作用？
【问题讨论】：
标签： javascript jquery jquery-animate
我使用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'），您只需要它。
【讨论】：
相信你也需要JQuery Color Animations。
【讨论】：
我遇到了同样的问题，当我包含正确的 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
【讨论】：
jQuery UI 具有高亮效果，完全符合您的要求。
$("exampleDiv").effect("highlight", {}, 5000);
您确实有一些选项，例如更改突出显示颜色。
【讨论】：
在 jQuery 1.3.2（或更早版本）中不支持对 backgroundColor 进行动画处理。仅支持采用数值的参数。请参阅方法上的documentation。从 jQuery 1.2 开始，color animations plugin 添加了执行此操作的功能。
【讨论】：
我遇到了同样的问题，最终结果是页面上多次调用jquery的js文件。
虽然这适用于任何其他方法，并且在尝试使用其他 css 属性（如 left）时也适用于 animate，但它不适用于 animate 方法中的背景颜色属性。
因此，我删除了对 jquery 的 js 文件的额外调用，它对我来说非常好。
【讨论】：
对我来说，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");
【讨论】：
我必须使用 color.js 文件才能让它工作。我正在使用 jquery 1.4.2。
【讨论】：
刚刚在 jquery 脚本下面添加了这个 sn-p，它立即开始工作：
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
【讨论】：
$(el).animate() 合作过，但不太确定它为什么停止工作。将其添加为 src 就像一个魅力！