jquery keydown animate background color

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!

ok, I see what everyone is saying about jquery UI...let's just use color for example...is the code correct then for color? I can't get that! jsfiddle.net/6k6uK — webwrks
– webwrks, Commented Sep 15, 2012 at 4:44
I included a jsFiddle in my answer that uses your exact code with the jQuery.color() plugin. — Josh
– Josh, Commented Sep 15, 2012 at 4:46

Josh · Accepted Answer · 2012-09-15 04:47:08Z

2

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

edited Sep 15, 2012 at 4:47

answered Sep 15, 2012 at 4:40

Josh

45k7 gold badges106 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Josh Over a year ago

@webwrks - Appologies... forgot to hit the update button after I added the plugin. Should be working now. I updated the link.

webwrks Over a year ago

thanks! I liked the yo! touch but was wondering too. I wonder if this is something jQuery will ever make possible w/out the UI. Thanks again.

jimp · Accepted Answer · 2012-09-15 04:40:55Z

1

Try the color plugin, which "Adds the ability to do color animations to jQuery 1.2, and newer."

Also, jQuery UI already includes color animation support.

answered Sep 15, 2012 at 4:40

jimp

17.6k3 gold badges30 silver badges39 bronze badges

Comments

GautamD31 · Accepted Answer · 2012-09-15 04:52:53Z

1

Try like this

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

edited Sep 15, 2012 at 4:52

answered Sep 15, 2012 at 4:31

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

1 Comment

Josh Over a year ago

@Gautam3164 - There is nothing wrong with his syntax... jQuery simply doesn't support animating background-color using the core library.

Collectives™ on Stack Overflow

jquery keydown animate background color

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related