Question

我是初学网页设计师，虽然我会尝试使用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>

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

Answer 1

您在该代码中遇到了许多错误：

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

<强>错误：

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

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

Answer 2

很抱歉，除非您使用jColor

，否则无法为背景设置动画

来自docs：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本jQuery功能进行动画处理（例如，宽度，高度，或左边可以动画但背景颜色不能，除非使用了jQuery.Color（）插件。

Answer 3

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

Answer 4

你有两个错误：

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

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

Answer 5

jsBin demo

$("#name").focusout(function(){                  
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).animate({backgroundColor:'#D23E42'}, 500);
  }   
});

在本演示中，我使用jQuery UI库来实现背景淡化颜色。
使用.focusout()
使用$.trim()防止空格被接受为有效输入
始终使用===来比较值

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

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

Demo without the UI library

为什么jQuery背景动画不起作用？

5 个答案:

jsBin demo

Demo without the UI library