Question

I am trying to simply animate the background on a keystroke. I can’t get it to work using:

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

Please let me know where I am going wrong. Thanks!

Answer 1

That’s because you can’t animate background-color without a plugin

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). Property values are treated as a
number of pixels unless otherwise specified. The units em and % can be
specified where applicable.

jsFiddle with the plugin