1

我是一名初学者网页设计师，虽然我会尝试使用 JavaScript 和 jQuery。在浏览了W3Schools之后，我尝试制作一个简单的 jQuery 动画，但它似乎不起作用。

<html>
    <head>
        <script type="text/javascript" src="jQuery.js"></script>
        <script>
            $(document).ready(function(){
                $("#name").blur(funtion(){
                    if(value==null || value==""){
                        $("#name").animate({background:#D23E42}, "slow");
                    }
                });
            });
        </script>
        <style type="text/css">
        body
        {
            font-family: Arial;
        }

        #name
        {
            background:#6BAA64;
            color: #FFFFFF;
            border:2px none;
            padding:5px;
            -webkit-border-radius:8px 8px;
            -moz-border-radius:8px 8px;
            border-radius:8px 8px;
            text-align: center;
        }
        </style>
    </head>

    <body style="text-align: center;">
        Name:
        <br />
        <input id="name" type="text" value="Your Name" />
    </body>
</html>

我只是想设置一个简单的联系人/注册表单模型，所以当名称字段为空或未更改时，会变成红色（模糊）。

4

5 回答 5

6

您在该代码中有很多错误：

$("#name").blur(function() {
    if (!this.value) {
        $(this).css('background-color', '#D23E42');
    }
});​

错误：

  • funtion=>function
  • value=> this.value。
  • 输入的值永远不能是null，它只能是一个空字符串。
  • animate=> css，原因是如果没有插件，您将无法为背景颜色更改设置动画。
  • 颜色需要是一个字符串#D23E42=>'#D23E42'
  • background=> background-color。
  • $("#name")=>$(this)

停止在 w3school 学习可能是个好主意，因为它似乎没有回报......

于 2012-04-27T06:35:46.217 回答
2

抱歉，您不能为背景设置动画，除非您使用jColor

从文档：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能进行动画处理，除非使用了 jQuery.Color() 插件）。

于 2012-04-27T06:36:13.947 回答
1

jQuery.animate不能为背景颜色设置动画，但只能width, height, left, top为等属性设置动画。要为背景颜色设置动画，您必须使用https://github.com/jquery/jquery-color之类的插件

于 2012-04-27T06:36:34.737 回答
1

你有两个错误：

  1. 颜色值是一个字符串，因此您需要在“#D23E42”周围加上引号。否则，您可能会看到语法错误。
  2. 无论如何，JQuery 实际上并没有为颜色设置动画。有一个插件声称可以添加此功能，尽管我还没有尝试过：

http://www.bitstorm.org/jquery/color-animation/

于 2012-04-27T06:37:08.680 回答
1

jsBin 演示

$("#name").focusout(function(){                  
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).animate({backgroundColor:'#D23E42'}, 500);
  }   
});
  • 在这个演示中，我使用了 jQuery UI 库来实现背景淡化颜色。
  • 使用.focusout()
  • 使用$.trim()防止空格被接受为有效输入
  • 始终用于===比较值

EDIT Hede 是一个没有 UI 的演示
如果用户重新输入一些文本，你肯定需要重做颜色：

$("#name").focusout(function(){                
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).css({background:'#D23E42'});
  }else{
    $(this).css({background:'#6BAA64'});
  }
});

没有 UI 库的演示

于 2012-04-27T06:39:58.373 回答