Jquery Fade Effect On Form Input Focus

this question is similar to my previous hover question (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':'#b1b开发者_Python百科1b1'},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?

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

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

Color plugin is needed to animate colours :

http://plugins.jquery.com/project/color