我正在尝试通过使用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);
这会产生一个相对较快的红色“脉冲”,吸引用户的眼睛。
再次感谢您的帮助。
答案 0 :(得分:16)
默认情况下,jQuery无法为颜色设置动画。要为颜色设置动画,请使用官方jQuery.Color插件。
除非如下所述,否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本的jQuery功能进行动画处理(例如,宽度,高度或左边可以设置动画,但背景颜色不能,除非使用了jQuery.Color()插件)。
答案 1 :(得分:4)
jQuery支持任何数字 CSS属性之间的动画,不包括颜色。但是,还有其他库可以使动画颜色成为可能。一个这样的图书馆是恰当命名的jQuery Color。它的readme page显示了几个如何使用它来使用jQuery .animate()
函数在颜色之间设置动画的示例
答案 2 :(得分:2)
使用CSS animation
属性和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; }
}
答案 3 :(得分:0)
你必须先将背景设置为from颜色,否则它第二次不会做任何事情。
你还拼错了css属性'background-color'
并把它放在引号中,就像我没有:)
$(dnid).css({'background-color': "#ffffff"});
$(dnid).animate({'background-color': "#db1a35"}, 1200);
答案 4 :(得分:0)
只需在jQuery脚本下面添加这个,就完成了:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>