Jquery淡入淡出对表单输入焦点的影响

Question

此问题与我之前的悬停问题（converting css hover to jquery hover）类似，但答案会有所不同，因为它涉及点击功能和两个bgs。

我正在建立一个联系页面，当用户点击其中一个输入字段时，我希望输入的背景从一个bg淡入到另一个。你可以在这里看到：Contact Page

我现在已经加入此代码，以使大多数的输入褪色的点击，但textarea的不会工作：

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

关于如何正确做到这一点的任何想法，使textarea工作？

Answer 1

textarea是一个<textarea>元素，而不是<input>元素。使用'textarea.area'而不是'input.area'。

Answer 2

优化你的代码位：

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

Answer 3

需要

颜色插件动画颜色：

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