Question

这个问题类似于我之前的悬停问题（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正常工作的任何想法？

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是<textarea>元素，而不是<input>元素。使用'textarea.area'代替'input.area'。

Answer 3

动画颜色需要彩色插件：

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

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

3 个答案: