jQuery Animate() 和 BackgroundColor
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16863640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Animate() and BackgroundColor
提问by fandingo
I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.
我正在尝试通过使用 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);
}
What's strange is that this alternate animation works:
奇怪的是，这个替代动画有效：
$(dnid).animate({opacity: "toggle"}, 1200);
But it's not what I want at all.
但这根本不是我想要的。
Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.
此外，函数中的 show() 和滚动功能工作正常。只是背景颜色动画没有。
The function above is called by this link
<a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>
上面的函数是通过这个链接调用的
<a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>
Could someone help me animate the background color?
有人可以帮我设置背景颜色的动画吗？
=========
==========
Thanks everyone for the help. Lots of similar answers. Here's what I ended up with
感谢大家的帮助。很多类似的答案。这就是我的结果
In my header
在我的标题中
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Then in my show_user function right after the scroll animation.
然后在滚动动画之后的我的 show_user 函数中。
var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);
That gives a relatively quick red "pulse" that will draw the user's eyes.
这给出了一个相对较快的红色“脉冲”，将吸引用户的眼睛。
Again, thanks for the help.
再一次感谢你的帮助。
回答by Nathaniel
jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Colorplugin.
默认情况下，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).
所有动画属性都应该动画为一个单一的数值，除了下面提到的；大多数非数字属性不能使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左可以设置动画，但背景颜色不能设置，除非使用 jQuery.Color() 插件）。
回答by grandivory
jQuery supports animation between any numericCSS properties, which does not include colors. However, there are other libraries that make animating colors possible. One such library is the aptly-named jQuery Color. Its readme pageshows several examples of how to use it to animate between colors using the jQuery .animate()function
jQuery 支持任何数字CSS 属性之间的动画，不包括颜色。但是，还有其他库可以使动画颜色成为可能。一个这样的库是恰当命名的jQuery Color。它的自述页面显示了几个示例，说明如何使用它使用 jQuery.animate()函数在颜色之间设置动画
回答by Sourabh
Use the CSS animationproperty and keyframes
使用 CSSanimation属性和keyframes
HTML
HTML
<div></div>
CSS
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; }
}
回答by Darush
Just add this below your jQuery script and you are done:
只需在你的 jQuery 脚本下面添加这个，你就完成了：
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
回答by Milo LaMar
you must first set the background to the from color or it wont do anything 2nd time around.
You also typoed the css property 'background-color'and put it in quotes like i didn't :)
您必须首先将背景设置为 from 颜色，否则第二次它不会做任何事情。您还输入了 css 属性'background-color'并将其放在引号中，就像我没有输入一样:)
$(dnid).css({'background-color': "#ffffff"});
$(dnid).animate({'background-color': "#db1a35"}, 1200);
