javascript - jQuery Animate() 和 BackgroundColor

Question

我正在尝试通过使用 JQuery 更改背景颜色来创建简单的脉冲效果。但是，我无法让 backgroundColor 进行动画处理。

function show_user(dnid) {
    /* dnid is HTML ID of a div. */
    if (! $(dnid).is(':visible')) {
        $(dnid).show()
    }
    $('html, body').animate({scrollTop: $(dnid).offset().top});
    $(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}

奇怪的是这个替代动画有效:

$(dnid).animate({opacity: "toggle"}, 1200);

但这根本不是我想要的。

此外，函数中的 show() 和滚动功能工作正常。只是背景颜色动画没有。

上面的函数是通过这个链接调用的 <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

有人可以帮我设置背景颜色的动画吗？

=========

感谢大家的帮助。很多类似的答案。这是我最终得到的结果

在我的标题中

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

然后在滚动动画之后的 show_user 函数中。

var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);

这会产生相对较快的红色“脉冲”，从而吸引用户的眼球。

再次感谢您的帮助。

Answer 1

默认情况下，jQuery 不能为颜色设置动画。为了动画颜色，使用官方 jQuery.Color插件。

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

Source