jquery - jqueryキーダウンは背景色をアニメーション化します

Question

キーストロークの背景を単純にアニメーション化しようとしています。次を使用して動作させることができません：

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

どこが悪いのか教えてください。ありがとう！

Answer 1

これは、プラグインなしでは背景色をアニメーション化できないためです。

以下に記載されている場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値以外のほとんどのプロパティは、基本的なjQuery機能を使用してアニメーション化できません（たとえば、幅、高さ、または左はアニメーション化できますが、jQuery.Color（）プラグインを使用しない限り、background-colorはアニメーション化できません）。特に指定がない限り、プロパティ値はピクセル数として扱われます。単位emと％は、必要に応じて指定できます。

プラグインを使用したjsFiddle

Answer 2

このようにしてみてください

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

Answer 3

「jQuery1.2以降にカラーアニメーションを実行する機能を追加する」カラープラグインをお試しください。

また、jQueryUIにはすでにカラーアニメーションのサポートが含まれています。