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

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)

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

• 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? Aug 15 '15 at 21:31
• 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. Aug 15 '15 at 22:05