Jquery Fade 对表单输入焦点的影响答案

【问题标题】：Jquery Fade Effect On Form Input FocusJquery Fade 对表单输入焦点的影响
【发布时间】：2009-12-06 17:12:50
【问题描述】：

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

我正在构建一个联系页面，当用户单击其中一个输入字段时，我希望输入的背景从一个 bg 淡化到另一个 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 工作的任何想法？

【问题讨论】：

标签： jquery jquery-selectors textarea

【解决方案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);
});

【讨论】：

【解决方案2】：

文本区域是<textarea> 元素，而不是<input> 元素。使用'textarea.area' 而不是'input.area'。

【讨论】：

【解决方案3】：

需要颜色插件来动画颜色：

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

【讨论】：