Jquery Fade Effect On Form Input Focus

Question

this question is similar to my previous hover question (http://stackoverflow.com/questions/1851141/converting-css-hover-to-jquery-hover) but the answer will be different because it involves a click function and two bgs.

I am building a contact page, and when the user clicks on one of the input fields, I want the background of the input to fade from one bg to another. You can see it here: Contact Page

I currently have added this code to make most of the inputs fade on click, but the textarea wont work:

<script type="text/javascript">

    if(window.jQuery){jQuery(function(){
     (function(){ jQuery('input.name').bind('focus', function(event, ui){var target = jQuery('input.name'); target.animate({'backgroundColor':'#b1b1b1'},250,'linear')});})();
     (function(){ jQuery('input.name').bind('blur', function(event, ui){var target = jQuery('input.name'); target.animate({'backgroundColor':'#CFD2D2'},250,'linear')});})();
     (function(){ jQuery('input.email').bind('focus', function(event, ui){var target = jQuery('input.email'); target.animate({'backgroundColor':'#b1b1b1'},250,'linear')});})();
     (function(){ jQuery('input.email').bind('blur', function(event, ui){var target = jQuery('input.email'); target.animate({'backgroundColor':'#CFD2D2'},250,'linear')});})();
     (function(){ jQuery('input.website').bind('focus', function(event, ui){var target = jQuery('input.website'); target.animate({'backgroundColor':'#b1b1b1'},250,'linear')});})();
     (function(){ jQuery('input.website').bind('blur', function(event, ui){var target = jQuery('input.website'); target.animate({'backgroundColor':'#CFD2D2'},250,'linear')});})();
     (function(){ jQuery('input.area').bind('focus', function(event, ui){var target = jQuery('input.area'); target.animate({'backgroundColor':'#b1b1b1'},250,'linear')});})();
     (function(){ jQuery('input.area').bind('blur', function(event, ui){var target = jQuery('input.area'); target.animate({'backgroundColor':'#CFD2D2'},250,'linear')});})();
    })};
</script>

Any ideas on how to do this correctly, and makeing the textarea work?

Answer 1

A textarea is a <textarea> element, not an <input> element. Use 'textarea.area' instead of 'input.area'.

Answer 2

To optimize your code a bit:

$('input.name, input.email, input.website, textarea.area').focus(function() {
    $(this).stop().animate({ backgroundColor: '#b1b1b1' }, 250);
}).blur(function() {
    $(this).stop().animate({ backgroundColor: '#cfd2d2' }, 250);
});