jquery快捷键动画背景颜色

Question

我正在尝试简单地在击键时对背景进行动画处理。我不能使用下面的命令让它工作：

$('input#userInput').live('keydown', function() { 
    $(this).animate({backgroundColor:'#4E1402'}, 300).delay(800).animate({backgroundColor: '#555'}, 100);
});

请告诉我哪里出错了。谢谢!

Answer 1

那是因为你的can't animate background-color没有插件

所有动画属性都应动画化为单个数值，以下说明除外；大多数非数值属性不能使用基本jQuery功能(例如，宽度、高度或左侧可以设置动画，但背景色不能设置动画，除非使用jQuery.Color()插件)设置动画。除非另有指定，否则属性值将被视为像素数。可以在适用的情况下指定单位em和%。

jsFiddle with the plugin

Answer 2

试着这样做

$('#userInput').keydown(function(){
  $(this).css("backgroundColor",'#4E1402');
$(this).delay(2000).queue(function(){
    $(this).css("backgroundColor",'#555');});
 });

Answer 3

试试color插件，它“在jQuery 1.2及更高版本中添加了制作彩色动画的功能”。

此外，jQuery UI已经包含了对彩色动画的支持。