Jquery 背景动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4701156/
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 background animate
提问by Yanh Huan
Is it possible to animate the background-colorin jQuery, because it is not working.
是否可以background-color在 jQuery 中设置动画，因为它不起作用。
$('#something').animate({
background :"red"
}, 1000);
回答by Thai
From the docs,
从文档中，
The jQuery UIproject extends the
.animate()method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.
在jQuery UI的项目扩展
.animate()，允许一些非数字的风格，如要设置动画的颜色的方法。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。
So if you use jQuery UI, you can animate background colors. Just make sure that you use backgroundColorand not background.
因此，如果您使用 jQuery UI，则可以为背景颜色设置动画。只要确保您使用backgroundColor而不是background.
The color animations pluginfor jQuery also does it.
jQuery的彩色动画插件也可以做到这一点。
Live Example: http://jsfiddle.net/thai/NXejr/2/
回答by jvenema
You'll need a plugin to do color animations with jQuery:
你需要一个插件来使用 jQuery 制作彩色动画：
回答by Taha Jahangir
This is simple code to animate RGB colors using pure jQuery (and not using jQuery.Colorplugin)
这是使用纯 jQuery（而不是使用jQuery.Color插件）为 RGB 颜色设置动画的简单代码
var start = [255, 0, 0], end=[255,255,255];
$('#element').animate({'aaa': 1}, {step: function(now){
$(this).css('background-color', 'rgb('+
parseInt(start[0] + (end[0]-start[0]) * now) + ',' +
parseInt(start[1] + (end[1]-start[1]) * now) + ',' +
parseInt(start[2] + (end[2]-start[2]) * now) + ')'
)
}, complete: function(){$(this).css('aaa', 0)}})
回答by matadur
Try this:
尝试这个：
$('#something').animate({ backgroundColor: "#FF0000" }, 1000, null, function () {
$('#something').css("backgroundColor", "#FF0000");
});
I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases. Tested in IE9, FF4, Chrome, using jQuery 1.5.
我在 animate 方面取得了不同程度的成功，但发现使用其内置回调加上 jQuery 的 css 似乎适用于大多数情况。在 IE9、FF4、Chrome 中测试，使用 jQuery 1.5。
For a more complete solution, add this plugin:
要获得更完整的解决方案，请添加此插件：
$(document).ready(function () {
$.fn.animateHighlight = function (highlightColor, duration) {
var highlightBg = highlightColor || "#FF0000";
var animateMs = duration || 1000;
var originalBg = this.css("background-color");
if (!originalBg || originalBg == highlightBg)
originalBg = "#FFFFFF"; // default to white
jQuery(this)
.css("backgroundColor", highlightBg)
.animate({ backgroundColor: originalBg }, animateMs, null, function () {
jQuery(this).css("backgroundColor", originalBg);
});
};
});
and call it like so:
并像这样称呼它：
$('#something').animateHighlight();
回答by amitgur
You can use CSS3 transitions for that same effect. your animate could be achived with
您可以使用 CSS3 过渡实现相同的效果。你的动画可以通过
#something {
-webkit-transition: background-color 1s linear;
transition: background-color 1s linear;
background: red;
}
The only problem with this solution is IE<10 support
此解决方案的唯一问题是 IE<10 支持
回答by Jeromy French
Using similar syntax (...{background-color :"red"}...), I get the error
使用类似的语法 ( ...{background-color :"red"}...)，我得到错误
SyntaxError: Unexpected token -
语法错误：意外标记 -
I was able to get it working by encapsulating the CSS property background-colorin single quotes:
我能够通过将 CSS 属性封装background-color在单引号中来使其工作：
$('#something').animate({
'background-color' :"red"
}, 1000);
