I was trying to make the starter inputs for my text rpg change the background color in a fade effect with JQuery, but I cant figure out what i did wrong. Heres the part im focusing on:

    $(document).ready(function() {
      $Intro_Inputs = $('#Header_Intro input');
      $Intro_Inputs.hover(function() {
        $(this).animate({'background-color':'#2E8AE5'}, 'slow');

If anyone could help me out with the mistake i made i would greatly appreciate it!

(The problem was that it wouldnt fade the colors in)


1 Answer 1


Here's what the jQuery documentation says:

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).

You can't do it with jQuery without the jQuery.Color plugin.

Alternatively, you could do it with CSS without javascript:
//animates to the hover state
#Header_Intro input:hover { background: #2E8AE5; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; }
//animates to the normal state
#Header_Intro input { background: #FFFFFF; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; }

  • \$\begingroup\$ Oh, thanks :D But how would i make the color fade back to normal after leaving the button area? Would i need to use the JQuery.Color plugin thing? \$\endgroup\$ Aug 15, 2015 at 21:31
  • \$\begingroup\$ In CSS, simply add a transition to the normal color on the normal state. With jQuery (and the jQuery Color plugin) you can supply a second function to hover() for the "hover to normal" transition. \$\endgroup\$
    – Alayric
    Aug 15, 2015 at 22:05

Not the answer you're looking for? Browse other questions tagged .