Эффект затухания Jquery на фокусе ввода формы

Question

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

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

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

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

Есть какие-нибудь идеи о том, как сделать это правильно и заставить текстовую область работать?

Answer 1

Чтобы немного оптимизировать ваш код:

$('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 2

Текстовая область - это элемент <textarea>, а не <input>. Используйте 'textarea.area' вместо 'input.area'.

Answer 3

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

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