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