jQuery Animate() 和 BackgroundColor

IT技术 javascript jquery css
2021-03-19 07:29:53

我正在尝试通过使用 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);

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

再一次感谢你的帮助。

5个回答

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

所有动画属性都应动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左可以设置动画，但背景颜色不能设置，除非使用 jQuery.Color() 插件）。

来源

精彩的！感谢您解释为什么 backgroundColor 被排除在标准库之外。我根据您的建议创建了一个解决方案。
2021-05-06 07:29:53
为什么不只是为 css 属性设置动画：$(dnid).animate({'background-color': "#db1a35"}, 1200);请参阅下面的答案
2021-05-14 07:29:53

jQuery 支持任何数字CSS 属性之间的动画，不包括颜色。但是，还有其他库可以使动画颜色成为可能。一个这样的库是恰当命名的jQuery Color。它的自述页面显示了如何使用它使用 jQuery.animate()函数在颜色之间设置动画的几个示例

惊人的。我没有意识到 jQuery 将动画限制为数字属性。感谢您的详尽解释。
2021-05-18 07:29:53

使用 CSSanimation属性和keyframes

看到它在行动

HTML

<div></div>

CSS

div {
    background-color: red;
    height: 200px; width: 200px;
    -webkit-animation: pulse 1s ease-in 0 infinite normal both;
    -moz-animation: pulse 1s ease-in 0 infinite normal both;
    -o-animation: pulse 1s ease-in 0 infinite normal both;
    animation: pulse 1s ease-in 0 infinite normal both;
}

@-webkit-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-moz-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-ms-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-o-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
在 Firefox 27.0.1 上损坏
2021-05-05 07:29:53
不客气:)如果您打算在生产中使用它，请不要忘记检查跨浏览器兼容性
2021-05-06 07:29:53
感谢您使用这个简单的选项来创建这种效果！
2021-05-14 07:29:53

您必须首先将背景设置为 from 颜色，否则第二次它不会做任何事情。您还输入了 css 属性'background-color'并将其放在引号中，就像我没有输入的那样:)

$(dnid).css({'background-color': "#ffffff"});

$(dnid).animate({'background-color': "#db1a35"}, 1200);
这行得通吗？你能 jsFiddle 这个吗？我无法让它为我工作。
2021-04-30 07:29:53
如果您不想重置的东西还有其他样式属性，您可以这样做 $(dnid).css('background-color', '#ffffff');
2021-05-10 07:29:53
抱歉@Chud37 原来我正在使用 jQueryUI 库来制作彩色动画。jsfiddle.net/aw42aj2L
2021-05-13 07:29:53

只需在你的 jQuery 脚本下面添加这个，你就完成了：

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
其它你可能感兴趣的问题
上一篇ES6箭头函数和函数内的词法作用域 下一篇如何防止 html/JavaScript 代码修改