How do I make the background color fade into a different color after hovering it? [closed]

Question

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:

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

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)

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; }