一尘不染

jQuery Animate()和BackgroundColor

css

我试图通过使用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()和scroll功能可以正常工作。只是背景颜色动画没有。

上面的函数通过此链接调用 <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);

这给出了一个相对较快的红色“脉冲”,将吸引用户的眼睛。

再一次感谢你的帮助。


阅读 296

收藏
2020-05-16

共1个答案

一尘不染

jQuery默认无法设置颜色动画。为了动画化颜色,请使用官方的jQuery.Color插件。

除非另有说明,否则所有动画属性都应设置为单个数值。大多数非数字属性不能使用基本的jQuery功能进行动画处理(例如,可以对width,height或left进行动画处理,而不能对background-color进行动画处理,除非使用jQuery.Color()插件)。

2020-05-16