JQuery Fade Effect On Form Input Focus

Question

Этот вопрос похож на мой предыдущий вопрос (converting css hover to jquery hover), но ответ будет другим, потому что он включает функцию щелчка и два bgs.

Я создаю контактную страницу, и когда пользователь нажимает на одно из полей ввода, я хочу, чтобы фон ввода исчезал от одного bg к другому. Вы можете увидеть здесь: Contact Page

В настоящее время я добавил этот код, чтобы сделать большинство из входов выцветают на щелчок, но текстовое поле не будет работать:

<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

A 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

Color плагин необходим для анимации цвета:

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